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

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2a873701f9e753bc22244e5376181533f04e356faf4fd5354ae2d9f74b8e0b62
-  data.tar.gz: e28e187057987616399ad70443bd140ec820d540029f4e908dd20f96925e66dc
+  metadata.gz: 230cb771b16126875e87e626e53cd633a26cbe4b65e0e9100405e72dd53a4f87
+  data.tar.gz: 7f513c46accbd0f95a5092ce5f1c60ca2cdec020e413407bfae0ec11ba0d5574
 SHA512:
-  metadata.gz: cba91cdf4269a6eaec42164bdd9697f797324df9b0d83c1c43023f78e593c513fc0121b436753b0249f1c3b3329161029aa693133fc8a8191d27992fc7f30751
-  data.tar.gz: 4f7f3707abef52dc9a6c0d3663496edf35e5e482c216e97e1c851dec6e279515b4574f6bbead99047c23c19ef3da1688e565a647e779bf54ab7bfd9f98218449
+  metadata.gz: 24028e6570bc44e5665a2f6dd2c4b034fbc2dc6fc0d28fa664714540893c344e1246b013d9ee78fb281d503e76440879ceeecdb90c794986b658c03e07b3b2d9
+  data.tar.gz: 889ea6030813ab4ad291437fb20841beb46eb742c46fed355f74b730ed14f76c1c36bac0004c489c54b6b839806d9fc1de0122b6129d8720160ee58a76017c52

data/app/pb_kits/playbook/pb_avatar/avatar.test.js

@@ -103,7 +103,7 @@ test('renders with online status', () => {
   );
 
   const onlineStatusAvatar = screen.getByTestId(testId);
-  const onlineStatus = onlineStatusAvatar.querySelector('.pb_online_status_kit_online_size_md')
+  const onlineStatus = onlineStatusAvatar.querySelector('.pb_online_status_kit')
   expect(onlineStatus).toBeInTheDocument();
 });
 

data/app/pb_kits/playbook/pb_badge/_badge.scss

@@ -4,9 +4,17 @@
 @import "../tokens/spacing";
 @import "../tokens/typography";
 
-$pb_badge_height_rounded: 16px;
+// Base badge class and all variants
+.pb_badge_kit,
+.pb_badge_kit_rounded,
+.pb_badge_kit_notification,
+.pb_badge_kit_notification_rounded,
+.pb_badge_kit_notification_error,
+.pb_badge_kit_notification_error_rounded,
+.pb_badge_kit_success_sm,
+.pb_badge_kit_success_sm_rounded {
+  $pb_badge_height_rounded: 16px;
 
-.pb_badge_kit {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -23,39 +31,139 @@ $pb_badge_height_rounded: 16px;
   }
 }
 
+// Add base styles to all status color variants too
+@each $color_name, $color_value in $status_colors {
+  .pb_badge_kit_#{$color_name},
+  .pb_badge_kit_#{$color_name}_rounded {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: $border_rad_light;
+    padding: 0 $space_xs/2;
+    border-width: 1px;
+    border-color: $card_light;
+    white-space: nowrap;
+
+    span {
+      display: inline-block;
+      font-size: $font_smaller - 1;
+      font-weight: $bolder;
+    }
+  }
+}
+
+// Generate all status color variants (with and without rounded)
 @each $color_name, $color_value in $status_colors {
   .pb_badge_kit_#{$color_name} {
     background: rgba($color_value, $opacity_1);
     color: map-get($status_color_text, $color_name);
   }
-
-  .pb_badge_kit_#{$color_name}.dark {
-    background: rgba(mix($bg_dark, $color_value, 10%), $opacity_2);
-    color: map-get($status_color_text_dark, $color_name);
+  
+  .pb_badge_kit_#{$color_name}_rounded {
+    background: rgba($color_value, $opacity_1);
+    color: map-get($status_color_text, $color_name);
+    height: 16px !important;
+    min-height: 16px !important;
+    min-width: 16px !important;
+    border-radius: 8px !important;
   }
 }
 
+// Special success_sm variant (since component maps "success" to "success_sm")
+.pb_badge_kit_success_sm {
+  background: rgba(map-get($status_colors, "success"), $opacity_1);
+  color: map-get($status_color_text, "success");
+}
+
+.pb_badge_kit_success_sm_rounded {
+  background: rgba(map-get($status_colors, "success"), $opacity_1);
+  color: map-get($status_color_text, "success");
+  height: 16px !important;
+  min-height: 16px !important;
+  min-width: 16px !important;
+  border-radius: 8px !important;
+}
+
+// Rounded variant (base)
 .pb_badge_kit_rounded {
-  height: $pb_badge_height_rounded;
-  min-height: $pb_badge_height_rounded;
-  min-width: $pb_badge_height_rounded;
-  border-radius: $pb_badge_height_rounded / 2;
+  height: 16px !important;
+  min-height: 16px !important;
+  min-width: 16px !important;
+  border-radius: 8px !important;
 }
 
+// Notification variants
 .pb_badge_kit_notification {
   background: $primary;
   color: $white;
 }
 
+.pb_badge_kit_notification_rounded {
+  background: $primary;
+  color: $white;
+  height: 16px !important;
+  min-height: 16px !important;
+  min-width: 16px !important;
+  border-radius: 8px !important;
+}
+
 .pb_badge_kit_notification_error {
   background: $error;
+  color: $white;
+}
+
+.pb_badge_kit_notification_error_rounded {
+  background: $error;
+  color: $white;
+  height: 16px !important;
+  min-height: 16px !important;
+  min-width: 16px !important;
+  border-radius: 8px !important;
+}
+
+// Dark theme variants
+@each $color_name, $color_value in $status_colors {
+  .pb_badge_kit_#{$color_name}.dark {
+    border-width: 0;
+    background: rgba(mix($bg_dark, $color_value, 10%), $opacity_2);
+    color: map-get($status_color_text_dark, $color_name);
+  }
+  
+  .pb_badge_kit_#{$color_name}_rounded.dark {
+    border-width: 0;
+    background: rgba(mix($bg_dark, $color_value, 10%), $opacity_2);
+    color: map-get($status_color_text_dark, $color_name);
+  }
+}
+
+.pb_badge_kit_success_sm.dark {
+  border-width: 0;
+  background: rgba(mix($bg_dark, map-get($status_colors, "success"), 10%), $opacity_2);
+  color: map-get($status_color_text_dark, "success");
+}
+
+.pb_badge_kit_success_sm_rounded.dark {
+  border-width: 0;
+  background: rgba(mix($bg_dark, map-get($status_colors, "success"), 10%), $opacity_2);
+  color: map-get($status_color_text_dark, "success");
+}
+
+.pb_badge_kit_notification.dark {
+  border-width: 0;
+}
+
+.pb_badge_kit_notification_rounded.dark {
+  border-width: 0;
 }
 
 .pb_badge_kit_notification_error.dark {
+  border-width: 0;
   background: $error_dark;
   color: $white;
 }
 
-.pb_badge_kit.dark {
+.pb_badge_kit_notification_error_rounded.dark {
   border-width: 0;
-}
+  background: $error_dark;
+  color: $white;
+}

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

@@ -1,23 +1,37 @@
 @import "./body_mixins";
 @import "../tokens/titles";
 
-[class^="pb_body_kit"] {
+// 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 {
   @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;
@@ -39,27 +53,86 @@
     font-size: $font_smaller;
     letter-spacing: $lspace_loose;
   }
+}
 
-  @each $status_name, $status_value in $pb_body_status {
-    &[class*="#{$status_name}"] {
-      @include pb_body($status_value);
-    }
+// 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);
   }
+}
 
-  &[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);
-      }
-    }
+// 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;
   }
 }
+
+// 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);
+  }
+}
+
+// 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

@@ -14,35 +14,22 @@
   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_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 {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
   }
-
-  &.dark {
-    @each $color_name, $color_value in $status_colors {
-      &[class*=_#{$color_name}]  {
-        background: rgba(mix($bg_dark, $color_value, 10%), $opacity_2);
-      }
-    }
+  
+  .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;
   }
 }

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

@@ -11,11 +11,13 @@ $pb_button_sizes: (
   "lg":   ($font_large - 2px),
 );
 
-.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 =================
-  &._primary  {
+  // Variant styles
+  &.pb_button_primary {
     @include pb_button_primary;
   }
-  &._secondary  {
+  
+  &.pb_button_secondary {
     @include pb_button_secondary;
   }
-  &._link  {
+  
+  &.pb_button_link {
     @include pb_button_link;
   }
-  &._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 ====================
-  &._block  {
+  // Block (full width) style
+  &.pb_button_block {
     @include pb_button_block;
+    width: 100% !important;
   }
 
-  // Loading ==================
-  &._loading  {
+  // Loading state
+  &.pb_button_loading {
     @include pb_button_loading(true);
   }
 
-  // Danger ===================
-  &._danger {
-    @include pb_button_danger;
-  }
-
-  // Disabled =================
-  &._disabled  {
+  // Disabled state
+  &.pb_button_disabled {
     @include pb_button_disabled;
   }
 
-  // Dark Variants =============
-  &.dark  {
-    &._primary  {
+  // Dark theme variants
+  &.dark {
+    &.pb_button_primary {
       @include pb_button_primary_dark;
     }
-    &._secondary  {
+    
+    &.pb_button_secondary {
       @include pb_button_secondary_dark;
     }
-    &._link  {
+    
+    &.pb_button_link {
       @include pb_button_link_dark;
     }
-    &._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

@@ -52,7 +52,7 @@ $pb_button_border_width: 0px;
 
   @include focus;
 
-  &.dark {
+  &[class*=dark] {
     @include focus-dark
   }
 
@@ -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', () => {