playbook_ui 14.25.0.pre.alpha.dialogfix10277 → 14.25.0.pre.alpha.play1986inlineloadingsolidvariant9963

data/app/pb_kits/playbook/pb_message/_message.scss

@@ -7,26 +7,21 @@
 $mention_bg_color_yellow: rgba(249, 187, 0, 0.2);
 $mention_bg_color_blue: #e5eefa;
 
-.pb_message_kit {
-  @include pb_message(false);
-}
-
-.pb_message_kit_avatar {
-  @include pb_message(true);
-}
+[class^=pb_message_kit] {
+  @include pb_message;
 
-.pb_message_mention_user,
-.pb_message_mention_self {
-  border-radius: $space_xxs;
-  color: $primary;
-  display: inline;
-  padding: $space_xxs;
+  [class^=pb_message_mention] {
+    border-radius: $space_xxs;
+    color: $primary;
+    display: inline;
+    padding: $space_xxs;
+    
+    &[class*=_user] {
+      background-color: $mention_bg_color_blue;
+    }
+    
+    &[class*=_self] {
+      background-color: $mention_bg_color_yellow;
+    }
+  }
 }
-
-.pb_message_mention_user {
-  background-color: $mention_bg_color_blue;
-}
-
-.pb_message_mention_self {
-  background-color: $mention_bg_color_yellow;
-}

data/app/pb_kits/playbook/pb_message/_message.tsx

@@ -84,7 +84,6 @@ const Message = (props: MessageProps) => {
         <Flex
             justify={alignTimestamp === 'left' ? 'none' : 'between'}
             orientation="row"
-            width="100%"
         >
           {label &&
             <Title

data/app/pb_kits/playbook/pb_message/_message_mixins.scss

@@ -1,20 +1,21 @@
 @import "../tokens/spacing";
 
-@mixin pb_message($with_avatar: false) {
+@mixin pb_message {
   display: flex;
   justify-content: flex-start;
 
   .content_wrapper {
     width: 100%;
     font-size: $font_base - 1;
-    @if $with_avatar {
-      margin-left: $space-xs;
-    }
 
     .pull-left {
       margin-left: $space-xs;
     }
 
+    [class^=pb_flex_] {
+      width: 100%;
+    }
+
     .message_text {
       margin: 0 0 $space-xs/2;
     }
@@ -24,6 +25,12 @@
     }
   }
 
+  &[class*=_avatar] {
+    .content_wrapper {
+      margin-left: $space-xs;
+    }
+  }
+
   .pb_message_body {
     font-size: 15px;
   }
@@ -41,4 +48,4 @@
       display: none;
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_message/message.html.erb

@@ -9,7 +9,7 @@
       }) %>
     <% end %>
     <div class="content_wrapper">
-      <%= pb_rails("flex", props: { orientation: "row", justify: object.align_timestamp == "left" ? "none" : "between", width:"100%" }) do %>
+      <%= pb_rails("flex", props: { orientation: "row", justify: object.align_timestamp == "left" ? "none" : "between" }) do %>
         <% if object.label.present? %>
           <%= pb_rails("title", props: {
             size: 4,

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.scss

@@ -16,7 +16,7 @@
       border-color: $error;
     }
   }
-  .pb_body_kit_negative {
+  [class*=pb_body_kit_negative] {
     margin-top: $space_xxs;
   }
 }
@@ -85,10 +85,7 @@
         .pb_checkbox_kit {
           align-items: center;
         }
-        .pb_button_kit,
-        .pb_button_link,
-        .pb_button_inline,
-        .pb_button_enabled {
+        .pb_button_kit_link_inline_enabled {
           color: $charcoal;
           &:hover {
             color: $primary;
@@ -113,7 +110,7 @@
           border-color: $error_dark;
         }
       }
-      .pb_body_kit_negative {
+      [class*=pb_body_kit_negative] {
         color: $error_dark;
       }
     }

data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss

@@ -8,8 +8,7 @@ $pb_multiple_users_border_size: 1px;
 $pb_multiple_users_size: map-get($avatar-sizes, "xs");
 $pb_multiple_users_size_xxs: map-get($avatar-sizes, "xxs");
 
-.pb_multiple_users_kit,
-.pb_multiple_users_kit_reverse {
+[class^=pb_multiple_users_kit] {
   display: inline-flex;
 
   .multiple_users_badge_xs,
@@ -54,23 +53,23 @@ $pb_multiple_users_size_xxs: map-get($avatar-sizes, "xxs");
       border: $pb_multiple_users_border_size solid $white;
     }
 
-    &:nth-child(1) { z-index: 0; }
-    &:nth-child(2) { z-index: 1; }
-    &:nth-child(3) { z-index: 2; }
-    &:nth-child(4) { z-index: 3; }
-    &:nth-child(5) { z-index: 4; }
+    @each $item in [1, 2, 3, 4, 5] {
+      &:nth-child(#{$item}) {
+        z-index: #{$item - 1};
+      }
+    }
   }
-}
 
-.pb_multiple_users_kit_reverse {
-  flex-direction: row-reverse;
+  &[class*=_reverse] {
+    flex-direction: row-reverse;
 
-  .pb_multiple_users_item {
-    margin-left: 0;
-    margin-right: $pb_multiple_users_overlap;
+    .pb_multiple_users_item {
+      margin-left: 0;
+      margin-right: $pb_multiple_users_overlap;
 
-    &:first-of-type {
-      margin-right: 0;
+      &:first-of-type {
+        margin-right: 0;
+      }
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.scss

@@ -243,4 +243,4 @@ $positions: (
         }
       }
     }
-  }
+  }

data/app/pb_kits/playbook/pb_nav/_bold_mixin.scss

@@ -31,4 +31,4 @@
       }
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_nav/_collapsible_nav.scss

@@ -272,4 +272,4 @@
       }
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_online_status/_online_status.scss

@@ -20,8 +20,7 @@ $pb_online_status_statuses: (
   primary: $primary,
 );
 
-.pb_online_status_kit,
-.pb_online_status_kit_no_border {
+[class^=pb_online_status_kit] {
   box-sizing: content-box;
   width: $pb_online_status_size;
   height: $pb_online_status_size;
@@ -37,26 +36,23 @@ $pb_online_status_statuses: (
   &.dark {
     border-color: $bg_dark;
   }
-}
 
-// Status colors
-@each $status_name, $status_value in $pb_online_status_statuses {
-  .pb_online_status_#{$status_name} {
-    background: $status_value;
+  @each $status_name, $status_value in $pb_online_status_statuses {
+    &[class*=_#{$status_name}] {
+      background: $status_value;
+    }
   }
-}
 
-// Sizes
-@each $size, $value in $pb_online_status_sizes {
-  .pb_online_status_size_#{$size} {
-    width: $value;
-    height: $value;
-    flex-basis: $value;
+  @each $size, $value in $pb_online_status_sizes {
+    &[class*=_size_#{$size}] {
+      width: $value;
+      height: $value;
+      flex-basis: $value;
+    }
   }
-}
 
-// No border
-.pb_online_status_kit_no_border {
-  border-width: 0;
-  border-style: none;
+  &[class*=_no_border] {
+    border-width: 0;
+    border-style: none;
+  }
 }

data/app/pb_kits/playbook/pb_online_status/_online_status.tsx

@@ -33,7 +33,7 @@ const OnlineStatus = (props: OnlineStatusProps) => {
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
   const getBorder = noBorder ? 'no_border' : ''
-  const classes = classnames(buildCss('pb_online_status_kit', getBorder ), `${size && "pb_online_status_size_" + size}`,  `pb_online_status_${status && status}`,globalProps(props), className)
+  const classes = classnames(buildCss('pb_online_status_kit', status, getBorder, "size", size), globalProps(props), className)
 
   return (
     <div

data/app/pb_kits/playbook/pb_online_status/online_status.rb

@@ -14,12 +14,11 @@ module Playbook
       prop :no_border, type: Playbook::Props::Boolean, default: false
 
       def classname
-        class_names = ["pb_online_status_kit"]
-        class_names << "pb_online_status_no_border" if no_border
-        class_names << "pb_online_status_size_#{size}" if size
-        class_names << "pb_online_status_#{status}" if status
+        generate_classname("pb_online_status_kit", status, is_no_border, "size", size)
+      end
 
-        generate_classname(class_names.compact.join(" "), separator: " ")
+      def is_no_border
+        no_border ? "no_border" : nil
       end
     end
   end

data/app/pb_kits/playbook/pb_online_status/online_status.test.js

@@ -11,7 +11,7 @@ test('renders online status with defaults', () => {
   )
 
   const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass('pb_online_status_kit pb_online_status_size_sm pb_online_status_offline')
+  expect(kit).toHaveClass('pb_online_status_kit_offline_size_sm')
 })
 
 test('renders online status with props', () => {
@@ -27,5 +27,5 @@ test('renders online status with props', () => {
   )
 
   const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass('pb_online_status_kit_no_border pb_online_status_size_lg pb_online_status_online dark additional_class')
+  expect(kit).toHaveClass('pb_online_status_kit_online_no_border_size_lg dark additional_class')
 })

data/app/pb_kits/playbook/pb_overlay/_overlay.scss

@@ -54,7 +54,7 @@ $overlay_colors: (
   }
 }
 
-.pb_overlay {
+[class^=pb_overlay] {
   position: relative;
   @each $color_name, $color in $overlay_colors {
     .overlay_#{$color_name} {

data/app/pb_kits/playbook/pb_overlay/overlay.rb

@@ -14,7 +14,7 @@ module Playbook
                              default: false
 
       def classname
-        generate_classname("pb_overlay", hide_scroll_bar_class, separator: " ")
+        generate_classname("pb_overlay", hide_scroll_bar_class)
       end
 
       def position

data/app/pb_kits/playbook/pb_passphrase/_passphrase.scss

@@ -9,11 +9,7 @@
     display: inline;
   }
 
-  .show-below-xs,
-  .show-below-sm,
-  .show-below-md,
-  .show-below-lg,
-  .show-below-xl {
+  [class*=show-below-] {
     display: none;
   }
   @each $breakpoint_name, $breakpoint in $breakpoints {
@@ -78,3 +74,4 @@
     }
   }
 }
+

data/app/pb_kits/playbook/pb_person/_person.scss

@@ -2,7 +2,7 @@
 @import "../pb_body/body";
 @import "../tokens/spacing";
 
-.pb_person_kit {
+[class^=pb_person_kit] {
   display: flex;
   align-items: baseline;
 

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss

@@ -284,4 +284,4 @@ $flag-min-resolution: 192dpi;
       background-image: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/flags@2x.png");
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_pill/_pill.scss

@@ -5,32 +5,30 @@
 
 $pb_pill_height: 22px;
 
-// Base styles for all pill variations
-@each $color_name, $color_value in $status_color_text {
-  .pb_pill_kit_#{$color_name}_lowercase,
-  .pb_pill_kit_#{$color_name}_none {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    padding: 0 $space-sm/1.8;
-    height: $pb_pill_height;
-    border-radius: $pb_pill_height/2;
-    white-space: nowrap;
-    background: rgba($color_value, $opacity-1);
+[class^=pb_pill_kit] {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 $space-sm/1.8;
+  height: $pb_pill_height;
+  border-radius: $pb_pill_height/2;
+  white-space: nowrap;
 
-    .pb_pill_text {
-      color: $color_value !important;
-    }
-  }
-}
-
-// Text transform specific styles
-@each $color_name, $color_value in $status_color_text {
-  .pb_pill_kit_#{$color_name}_lowercase {
+  &[class*=lowercase] {
     text-transform: lowercase;
   }
 
-  .pb_pill_kit_#{$color_name}_none {
+  &[class*=none] {
     text-transform: none;
   }
-}
+
+  @each $color_name, $color_value in $status_color_text {
+    &[class*=_#{$color_name}]  {
+        background: rgba($color_value, $opacity-1);
+
+      .pb_pill_text {
+        color: $color_value !important;
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.scss

@@ -10,39 +10,37 @@
   margin-right: $space_xs;
 }
 
-.pb_progress_pills_kit {
-  .progress_pills {
+[class^=pb_progress_pills_kit] {
+  [class*=progress_pills] {
     display: flex;
   }
 
-  .progress_pills_status {
+  [class*=progress_pills_status] {
     display: flex;
     align-items: center;
     margin-bottom: $space_xs;
 
-    .pb_title_kit {
+    [class*=title] {
       margin-right: $space_xs;
     }
   }
 
-  .pb_progress_pill_active,
-  .pb_progress_pill_inactive {
+  [class*=pb_progress_pill] {
     @include pb_progress_pill;
 
     &.full_width_pill {
       max-width: none;
     }
-  }
 
-  .pb_progress_pill_inactive {
-    background-color: $border_light;
-    
-    &.dark {
+    &[class*=_inactive] {
+      background-color: $border_light;
+      &.dark {
       background-color: $border_dark;
+      }
     }
-  }
 
-  .pb_progress_pill_active {
-    background-color: $primary_action;
+    &[class*=_active] {
+      background-color: $primary_action;
+    }
   }
-}
+}

data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.scss

@@ -4,133 +4,58 @@
 
 $pb_progress_simple_height: 4px;
 
-// Base wrapper styles
-.pb_progress_simple_wrapper_left,
-.pb_progress_simple_wrapper_center,
-.pb_progress_simple_wrapper_right {
+[class^=pb_progress_simple_wrapper] {
   display: flex;
   justify-content: flex-start;
   align-items: center;
-}
 
-.pb_progress_simple_wrapper_center {
-  justify-content: center;
-}
+  &[class*=_center] {
+    justify-content: center;
+  }
 
-.pb_progress_simple_wrapper_right {
-  justify-content: flex-end;
+  &[class*=_right] {
+    justify-content: flex-end;
+  }
 }
 
-// Base kit styles - all possible combinations
-.pb_progress_simple_kit,
-.pb_progress_simple_kit_muted,
-.pb_progress_simple_kit_positive,
-.pb_progress_simple_kit_negative,
-.pb_progress_simple_kit_warning,
-.pb_progress_simple_kit_left,
-.pb_progress_simple_kit_center,
-.pb_progress_simple_kit_right,
-.pb_progress_simple_kit_muted_left,
-.pb_progress_simple_kit_muted_center,
-.pb_progress_simple_kit_muted_right,
-.pb_progress_simple_kit_positive_left,
-.pb_progress_simple_kit_positive_center,
-.pb_progress_simple_kit_positive_right,
-.pb_progress_simple_kit_negative_left,
-.pb_progress_simple_kit_negative_center,
-.pb_progress_simple_kit_negative_right,
-.pb_progress_simple_kit_warning_left,
-.pb_progress_simple_kit_warning_center,
-.pb_progress_simple_kit_warning_right,
-.pb_progress_simple_kit_muted_positive_left,
-.pb_progress_simple_kit_muted_positive_center,
-.pb_progress_simple_kit_muted_positive_right,
-.pb_progress_simple_kit_muted_negative_left,
-.pb_progress_simple_kit_muted_negative_center,
-.pb_progress_simple_kit_muted_negative_right,
-.pb_progress_simple_kit_muted_warning_left,
-.pb_progress_simple_kit_muted_warning_center,
-.pb_progress_simple_kit_muted_warning_right {
+[class^=pb_progress_simple_kit] {
   width: 100%;
   height: $pb_progress_simple_height;
   border-radius: $pb_progress_simple_height/2;
   background: rgba($primary, $opacity-1);
-
-  .progress_simple_value {
+    &[class*=_positive] {
+      .progress_simple_value {
+        background: $success;
+      }
+    }
+    &[class*=_negative] {
+      .progress_simple_value {
+        background: $error;
+      }
+    }
+    &[class*=_warning] {
+      .progress_simple_value {
+        background: $warning;
+      }
+    }
+
+  [class^=progress_simple_value] {
     width: 0%;
     height: 100%;
     border-radius: $pb_progress_simple_height/2;
     background: $primary;
   }
-}
 
-// Variant styles
-.pb_progress_simple_kit_positive,
-.pb_progress_simple_kit_positive_left,
-.pb_progress_simple_kit_positive_center,
-.pb_progress_simple_kit_positive_right,
-.pb_progress_simple_kit_muted_positive_left,
-.pb_progress_simple_kit_muted_positive_center,
-.pb_progress_simple_kit_muted_positive_right {
-  .progress_simple_value {
-    background: $success;
-  }
-}
+  &[class*=_muted] {
+    background: rgba($slate, $opacity-2);
 
-.pb_progress_simple_kit_negative,
-.pb_progress_simple_kit_negative_left,
-.pb_progress_simple_kit_negative_center,
-.pb_progress_simple_kit_negative_right,
-.pb_progress_simple_kit_muted_negative_left,
-.pb_progress_simple_kit_muted_negative_center,
-.pb_progress_simple_kit_muted_negative_right {
-  .progress_simple_value {
-    background: $error;
+    .progress_simple_value {
+      background: $slate;
+    }
   }
-}
 
-.pb_progress_simple_kit_warning,
-.pb_progress_simple_kit_warning_left,
-.pb_progress_simple_kit_warning_center,
-.pb_progress_simple_kit_warning_right,
-.pb_progress_simple_kit_muted_warning_left,
-.pb_progress_simple_kit_muted_warning_center,
-.pb_progress_simple_kit_muted_warning_right {
-  .progress_simple_value {
-    background: $warning;
+  &[class*=_right] {
+    display: flex;
+    align-self: flex-end;
   }
 }
-
-// Muted styles
-.pb_progress_simple_kit_muted,
-.pb_progress_simple_kit_muted_left,
-.pb_progress_simple_kit_muted_center,
-.pb_progress_simple_kit_muted_right,
-.pb_progress_simple_kit_muted_positive_left,
-.pb_progress_simple_kit_muted_positive_center,
-.pb_progress_simple_kit_muted_positive_right,
-.pb_progress_simple_kit_muted_negative_left,
-.pb_progress_simple_kit_muted_negative_center,
-.pb_progress_simple_kit_muted_negative_right,
-.pb_progress_simple_kit_muted_warning_left,
-.pb_progress_simple_kit_muted_warning_center,
-.pb_progress_simple_kit_muted_warning_right {
-  background: rgba($slate, $opacity-2);
-
-  .progress_simple_value {
-    background: $slate;
-  }
-}
-
-// Right alignment
-.pb_progress_simple_kit_right,
-.pb_progress_simple_kit_muted_right,
-.pb_progress_simple_kit_positive_right,
-.pb_progress_simple_kit_negative_right,
-.pb_progress_simple_kit_warning_right,
-.pb_progress_simple_kit_muted_positive_right,
-.pb_progress_simple_kit_muted_negative_right,
-.pb_progress_simple_kit_muted_warning_right {
-  display: flex;
-  align-self: flex-end;
-}

data/app/pb_kits/playbook/pb_progress_step/_progress_step.scss

@@ -292,4 +292,4 @@
     }
   }
 
-}
+}