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

data/app/pb_kits/playbook/pb_link/_link.scss

@@ -3,7 +3,8 @@
 @import "../tokens/typography";
 @import "../tokens/border_radius";
 
-.pb_link_kit{
+// Base styles
+.pb_link_kit {
   @include pb_link($primary);
   &:hover {
     color: $text_lt_default;
@@ -25,42 +26,135 @@
       color: $text_dk_default;
     }
   }
-  @each $color_name, $color_value in $pb_link_colors {
-    &[class*=_#{"" + $color_name}] {
-      @include pb_link($color_value);
+}
 
+// Color variants
+@each $color_name, $color_value in $pb_link_colors {
+  @if $color_name != "default" {
+    .pb_link_kit_#{$color_name} {
+      @include pb_link($color_value);
       &:hover {
         color: map-get($pb_link_hover_colors, $color_name);
       }
-
       &:visited {
         color: darken($primary_action, 10%);
       }
+      &:focus {
+        outline: none;
+      }
+      &:focus-visible {
+        border-radius: $border_rad_light;
+        outline: 1px solid $primary;
+        outline-offset: 2px;
+      }
     }
   }
+}
 
-  @each $dark_color_name, $dark_color_value in $pb_dark_link_colors{
-    &[class*=_#{$dark_color_name}].dark{
-      @include pb_link($dark_color_value);
-      
+// Dark mode color variants
+@each $dark_color_name, $dark_color_value in $pb_dark_link_colors {
+  .pb_link_kit_#{$dark_color_name}.dark {
+    @include pb_link($dark_color_value);
+    &:hover {
+      color: map-get($pb_dark_link_hover_colors, $dark_color_name);
+    }
+    &:visited {
+      color: darken($primary_action, 10%);
+    }
+  }
+}
+
+// Underline modifier
+.pb_link_kit_underline,
+.pb_link_kit_body_underline,
+.pb_link_kit_muted_underline,
+.pb_link_kit_destructive_underline,
+.pb_link_kit_underline_disabled,
+.pb_link_kit_body_underline_disabled,
+.pb_link_kit_muted_underline_disabled,
+.pb_link_kit_destructive_underline_disabled {
+  text-decoration: underline;
+}
+
+// Disabled modifier
+.pb_link_kit_disabled,
+.pb_link_kit_body_disabled,
+.pb_link_kit_muted_disabled,
+.pb_link_kit_destructive_disabled,
+.pb_link_kit_underline_disabled,
+.pb_link_kit_body_underline_disabled,
+.pb_link_kit_muted_underline_disabled,
+.pb_link_kit_destructive_underline_disabled {
+  pointer-events: none;
+  cursor: default;
+  color: $text_lt_lighter;
+}
+
+// Color + underline combinations
+@each $color_name, $color_value in $pb_link_colors {
+  @if $color_name != "default" {
+    .pb_link_kit_#{$color_name}_underline {
+      @include pb_link($color_value);
       &:hover {
-        color: map-get($pb_dark_link_hover_colors, $dark_color_name);
+        color: map-get($pb_link_hover_colors, $color_name);
       }
-
       &:visited {
         color: darken($primary_action, 10%);
       }
+      &:focus {
+        outline: none;
+      }
+      &:focus-visible {
+        border-radius: $border_rad_light;
+        outline: 1px solid $primary;
+        outline-offset: 2px;
+      }
     }
   }
+}
 
-  &._underline {
-    text-decoration: underline;
+// Color + disabled combinations
+@each $color_name, $color_value in $pb_link_colors {
+  @if $color_name != "default" {
+    .pb_link_kit_#{$color_name}_disabled {
+      @include pb_link($color_value);
+      &:hover {
+        color: map-get($pb_link_hover_colors, $color_name);
+      }
+      &:visited {
+        color: darken($primary_action, 10%);
+      }
+      &:focus {
+        outline: none;
+      }
+      &:focus-visible {
+        border-radius: $border_rad_light;
+        outline: 1px solid $primary;
+        outline-offset: 2px;
+      }
+    }
   }
+}
 
-  &._disabled {
-    pointer-events: none;
-    cursor: default;
-    color: $text_lt_lighter;
+// Color + underline + disabled combinations
+@each $color_name, $color_value in $pb_link_colors {
+  @if $color_name != "default" {
+    .pb_link_kit_#{$color_name}_underline_disabled {
+      @include pb_link($color_value);
+      &:hover {
+        color: map-get($pb_link_hover_colors, $color_name);
+      }
+      &:visited {
+        color: darken($primary_action, 10%);
+      }
+      &:focus {
+        outline: none;
+      }
+      &:focus-visible {
+        border-radius: $border_rad_light;
+        outline: 1px solid $primary;
+        outline-offset: 2px;
+      }
+    }
   }
-
-}
+}

data/app/pb_kits/playbook/pb_list/_list.scss

@@ -1,31 +1,31 @@
 @import "list_mixin";
 
-.pb_list_kit {
+[class*=pb_list_kit] {
   @include pb_list;
 }
 
-.pb_list_kit {
-  &._dark li {
+[class^=pb_list_kit] {
+  &[class*=_dark] li {
     @include pb_list_dark;
   }
 
-  &._large li {
+  &[class*=_large] li {
     @include pb_list_large;
   }
 
-  &._xpadding li {
+  &[class*=_xpadding] li {
     @include pb_list_x_padding;
   }
 
-  &._borderless li {
+  &[class*=_borderless] li {
     @include pb_list_borderless;
   }
 
-  &._layout_left li {
+  &[class*=_layout_left] li {
     @include pb_list_layout_left;
   }
 
-  &._layout_right li {
+  &[class*=_layout_right] li {
     @include pb_list_layout_right;
   }
-}
+}

data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.scss

@@ -1,19 +1,21 @@
 @import "../pb_body/body";
 @import "../pb_icon/icon";
 
-.pb_loading_inline_kit {
+.pb_loading_inline_kit_left,
+.pb_loading_inline_kit_center,
+.pb_loading_inline_kit_right {
   display: flex;
   align-items: baseline;
+}
 
-  &._center {
-    justify-content: center;
-  }
-
-  &._left {
-    justify-content: flex-start;
-  }
+.pb_loading_inline_kit_center {
+  justify-content: center;
+}
 
-  &._right {
-    justify-content: flex-end;
-  }
+.pb_loading_inline_kit_left {
+  justify-content: flex-start;
 }
+
+.pb_loading_inline_kit_right {
+  justify-content: flex-end;
+}

data/app/pb_kits/playbook/pb_map/_map.scss

@@ -4,7 +4,7 @@
 @import "../tokens/border_radius";
 @import "./_pb_map_button_mixin.scss";
 
-[class*="pb_map"] {
+.pb_map {
   .pb_map-custom-button {
     @include pb_map_button;
     position: relative;

data/app/pb_kits/playbook/pb_map/docs/_map_default.jsx

@@ -26,7 +26,7 @@ const MapDefault = (props) => {
         new maplibregl.Marker({
           color: mapTheme.marker,
         }).setLngLat(defaultPosition)
-        .setPopup(new maplibregl.Popup({closeButton: false}).setHTML(`<h4 class="pb_title_kit_size_4">Hello World!</h4>`)) // add popup
+        .setPopup(new maplibregl.Popup({closeButton: false}).setHTML(`<h4 class="pb_title_kit pb_title_4">Hello World!</h4>`)) // add popup
         .addTo(map);
 
         // disable map zoom when using scroll

data/app/pb_kits/playbook/pb_map/docs/_map_with_custom_button.jsx

@@ -29,7 +29,7 @@ const MapWithCustomButton = (props) => {
         new maplibregl.Marker({
           color: mapTheme.marker,
         }).setLngLat(defaultPosition)
-        .setPopup(new maplibregl.Popup({closeButton: false}).setHTML(`<h4 class="pb_title_kit_size_4">Hello World!</h4>`)) // add popup
+        .setPopup(new maplibregl.Popup({closeButton: false}).setHTML(`<h4 class="pb_title_kit pb_title_4">Hello World!</h4>`)) // add popup
         .addTo(map);
 
         // disable map zoom when using scroll

data/app/pb_kits/playbook/pb_map/docs/_map_with_plugin.jsx

@@ -26,7 +26,7 @@ const MapWithPlugin = (props) => {
         new maplibregl.Marker({
           color: mapTheme.marker,
         }).setLngLat(defaultPosition)
-        .setPopup(new maplibregl.Popup({className: 'map_popup', closeButton: false}).setHTML(`<h4 class="pb_title_kit_size_4">Hello World!</h4>`)) // add popup
+        .setPopup(new maplibregl.Popup({closeButton: false}).setHTML(`<h4 class="pb_title_kit pb_title_4">Hello World!</h4>`)) // add popup
         .addTo(map);
 
         //add maplibre default zoom controls

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

@@ -8,20 +8,25 @@ $mention_bg_color_yellow: rgba(249, 187, 0, 0.2);
 $mention_bg_color_blue: #e5eefa;
 
 .pb_message_kit {
-  @include pb_message;
+  @include pb_message(false);
+}
+
+.pb_message_kit_avatar {
+  @include pb_message(true);
+}
 
-  .pb_message_mention {
-    border-radius: $space_xxs;
-    color: $primary;
-    display: inline;
-    padding: $space_xxs;
-    
-    &._user {
-      background-color: $mention_bg_color_blue;
-    }
-    
-    &._self {
-      background-color: $mention_bg_color_yellow;
-    }
-  }
+.pb_message_mention_user,
+.pb_message_mention_self {
+  border-radius: $space_xxs;
+  color: $primary;
+  display: inline;
+  padding: $space_xxs;
 }
+
+.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,6 +84,7 @@ 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,19 +1,18 @@
 @import "../tokens/spacing";
 
-@mixin pb_message {
+@mixin pb_message($with_avatar: false) {
   display: flex;
   justify-content: flex-start;
 
   .content_wrapper {
     width: 100%;
     font-size: $font_base - 1;
-
-    .pull-left {
+    @if $with_avatar {
       margin-left: $space-xs;
     }
 
-    .pb_flex_ {
-      width: 100%;
+    .pull-left {
+      margin-left: $space-xs;
     }
 
     .message_text {
@@ -25,12 +24,6 @@
     }
   }
 
-  &._avatar {
-    .content_wrapper {
-      margin-left: $space-xs;
-    }
-  }
-
   .pb_message_body {
     font-size: 15px;
   }
@@ -48,4 +41,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" }) do %>
+      <%= pb_rails("flex", props: { orientation: "row", justify: object.align_timestamp == "left" ? "none" : "between", width:"100%" }) do %>
         <% if object.label.present? %>
           <%= pb_rails("title", props: {
             size: 4,

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

@@ -85,7 +85,10 @@
         .pb_checkbox_kit {
           align-items: center;
         }
-        .pb_button_kit_link_inline_enabled {
+        .pb_button_kit,
+        .pb_button_link,
+        .pb_button_inline,
+        .pb_button_enabled {
           color: $charcoal;
           &:hover {
             color: $primary;

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

@@ -8,7 +8,8 @@ $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,
+.pb_multiple_users_kit_reverse {
   display: inline-flex;
 
   .multiple_users_badge_xs,
@@ -53,23 +54,23 @@ $pb_multiple_users_size_xxs: map-get($avatar-sizes, "xxs");
       border: $pb_multiple_users_border_size solid $white;
     }
 
-    @each $item in [1, 2, 3, 4, 5] {
-      &:nth-child(#{$item}) {
-        z-index: #{$item - 1};
-      }
-    }
+    &: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; }
   }
+}
 
-  &._reverse {
-    flex-direction: row-reverse;
+.pb_multiple_users_kit_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

@@ -89,7 +89,7 @@ $positions: (
   }
 }
 
-.pb_multiple_users_stacked_kit {
+[class^=pb_multiple_users_stacked_kit] {
   $container_size: map-get($avatar-sizes, "xs");
   $bubble_container_size: map-get($avatar-sizes, "sm");
   $overlap: -15px;
@@ -103,7 +103,7 @@ $positions: (
   position: relative;
   flex-shrink: 0;
   flex-grow: 0;
-  .pb_avatar_kit.pb_multiple_users_stacked_item {
+  [class^=pb_avatar_kit].pb_multiple_users_stacked_item {
     @include avatar-size($stacked_size);
     &.dark {
       .avatar_wrapper {
@@ -117,10 +117,10 @@ $positions: (
       }
     }
   }
-  &._single .pb_multiple_users_stacked_item {
+  &[class*=_single] .pb_multiple_users_stacked_item {
     @include avatar-size(28px);
   }
-  .pb_avatar_kit.second_item, .pb_badge_kit.second_item {
+  [class^=pb_avatar_kit].second_item, [class^=pb_badge_kit].second_item {
     @include position((bottom: 0, right: 0));
     z-index: 2;
     background: tint($primary, 90%);
@@ -143,7 +143,7 @@ $positions: (
 
   // Iterate over each size to adjust the bubble container only when class contains "_bubble_"
   @each $size_name, $size_value in $avatar-sizes {
-      &._bubble_[class*=_size_#{$size_name}] {
+      &[class*=_bubble_][class*=_size_#{$size_name}] {
         // Set bubble container size based on the class
         $bubble_container_size: $size_value;
         $container_size: $size_value;
@@ -161,7 +161,7 @@ $positions: (
           background-color: $card_dark;
         }
   
-        .pb_avatar_kit.pb_multiple_users_stacked_item {
+        [class^=pb_avatar_kit].pb_multiple_users_stacked_item {
           @include avatar-size($bubble_container_size * 0.45); // Adjust the size of stacked avatars
   
           &.dark {
@@ -175,7 +175,7 @@ $positions: (
           }
         }
   
-        .pb_avatar_kit {
+        [class^=pb_avatar_kit] {
           // First Item
           &.first_item {
             @include position(map-get(map-get($positions, 'first-item-double'), $size_name));
@@ -235,12 +235,12 @@ $positions: (
           }
         }
         
-        &._single_bubble {
-          .pb_avatar_kit.first_item {
+        &[class*=_single_bubble] {
+          [class^=pb_avatar_kit].first_item {
             @include position((top: 0, left: 0));
             @include avatar-size($bubble_container_size);
           }
         }
       }
     }
-  }
+  }

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

@@ -1,21 +1,21 @@
 @mixin bold {
   @include subtle;
 
-  .pb_nav_list_kit_item.pb_nav_list_item{
-    &._link {
-      &._active {
+  [class*=pb_nav_list_kit_item][class*=pb_nav_list_item]{
+    &[class*=_link] {
+      &[class*=_active] {
         background-color: $primary;
         color: $white;
         box-shadow: $shadow_deep;
         @media (hover:hover) {
           &:hover {
             background-color: darken($primary, 4%);
-            ._text,._icon {
+            [class*=_text],[class*=_icon] {
               color: $white;
             }
           }
         }
-        ._text,._icon {
+        [class*=_text],[class*=_icon] {
           font-weight: $bolder;
         }
       }
@@ -23,12 +23,12 @@
   }
 
   .dark & {
-    .pb_nav_list_kit_item.pb_nav_list_item {
-      &._link {
-        &._active {
+    [class*=pb_nav_list_kit_item][class*=pb_nav_list_item] {
+      &[class*=_link] {
+        &[class*=_active] {
           box-shadow: 0 2px 10px 0 $shadow_dark;
         }
       }
     }
   }
-}
+}

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,7 +20,8 @@ $pb_online_status_statuses: (
   primary: $primary,
 );
 
-.pb_online_status_kit {
+.pb_online_status_kit,
+.pb_online_status_kit_no_border {
   box-sizing: content-box;
   width: $pb_online_status_size;
   height: $pb_online_status_size;
@@ -36,23 +37,26 @@ $pb_online_status_statuses: (
   &.dark {
     border-color: $bg_dark;
   }
+}
 
-  @each $status_name, $status_value in $pb_online_status_statuses {
-    &[class*=_#{$status_name}] {
-      background: $status_value;
-    }
+// Status colors
+@each $status_name, $status_value in $pb_online_status_statuses {
+  .pb_online_status_#{$status_name} {
+    background: $status_value;
   }
+}
 
-  @each $size, $value in $pb_online_status_sizes {
-    &[class*=_size_#{$size}] {
-      width: $value;
-      height: $value;
-      flex-basis: $value;
-    }
+// Sizes
+@each $size, $value in $pb_online_status_sizes {
+  .pb_online_status_size_#{$size} {
+    width: $value;
+    height: $value;
+    flex-basis: $value;
   }
+}
 
-  &._no_border {
-    border-width: 0;
-    border-style: none;
-  }
+// No border
+.pb_online_status_kit_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', status, getBorder, "size", size), globalProps(props), className)
+  const classes = classnames(buildCss('pb_online_status_kit', getBorder ), `${size && "pb_online_status_size_" + size}`,  `pb_online_status_${status && status}`,globalProps(props), className)
 
   return (
     <div

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

@@ -14,11 +14,12 @@ module Playbook
       prop :no_border, type: Playbook::Props::Boolean, default: false
 
       def classname
-        generate_classname("pb_online_status_kit", status, is_no_border, "size", size)
-      end
+        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
 
-      def is_no_border
-        no_border ? "no_border" : nil
+        generate_classname(class_names.compact.join(" "), separator: " ")
       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_offline_size_sm')
+  expect(kit).toHaveClass('pb_online_status_kit pb_online_status_size_sm pb_online_status_offline')
 })
 
 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_online_no_border_size_lg dark additional_class')
+  expect(kit).toHaveClass('pb_online_status_kit_no_border pb_online_status_size_lg pb_online_status_online dark additional_class')
 })

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

@@ -138,7 +138,7 @@ $overlay_colors: (
 
     @each $key, $value in $opacity {
       &.#{$key} {
-        .overlay {
+        [class^=overlay] {
           opacity: $value;
         }
       }