playbook_ui 14.25.0.pre.alpha.PLAY2361datepickerarrownav9708 → 14.25.0.pre.alpha.testingcss9713

data/app/pb_kits/playbook/pb_layout/_layout.tsx

@@ -22,7 +22,7 @@ type LayoutPropTypes = {
   size?: "xs" | "sm" | "md" | "base" | "lg" | "xl",
   variant?: "light" | "dark" | "gradient",
   transparent?: boolean,
-  layout?: "sidebar" | "collection" | "kanban" | "content" | "masonry" | "bracket",
+  layout?: "sidebar" | "collection" | "collection_detail" | "kanban" | "content" | "masonry" | "bracket",
 } & GlobalProps
 
 type LayoutSideProps = {
@@ -81,11 +81,10 @@ const Body = (props: LayoutBodyProps) => {
 // Item component
 const Item = (props: LayoutItemProps) => {
   const { children, className, size = 'sm' } = props
-  const sizeClass = `size_${size}`
   const dynamicInlineProps = globalInlineProps(props)
   return (
     <div
-        className={classnames('layout_item', sizeClass, globalProps(props), className)}
+        className={classnames('layout_item', `layout_item_size_${size}`, globalProps(props), className)}
         style={dynamicInlineProps}
     >
       {children}
@@ -144,20 +143,24 @@ const Layout = (props: LayoutPropTypes) => {
   const htmlProps = buildHtmlProps(htmlOptions)
 
   const layoutCss =
-    (layout == 'collection' || layout == 'bracket')
+    (layout == 'collection' || layout == 'bracket' || layout == 'collection_detail' || layout == 'content' || layout == 'masonry')
       ? `pb_layout_kit_${layout}`
       : layout == 'kanban'
         ? `pb_layout_kit_${layout}${responsiveClass}`
-        : buildCss(`pb_layout_kit_${layout}`, `size_${size}`, position, variant, {
-          dark: dark,
-          transparent: transparent,
-          full: full,
-        })
+        : classnames(
+            'pb_layout_kit_sidebar',
+            `pb_layout_kit_sidebar_size_${size}_${position}_${variant}`,
+            {
+              'pb_layout_kit_sidebar_dark': dark,
+              'pb_layout_kit_sidebar_transparent': transparent,
+              'pb_layout_kit_sidebar_full': full,
+            }
+          )
 
   const layoutCollapseCss =
-    (layout == 'collection' || layout == 'kanban' || layout == 'bracket')
+    (layout == 'collection' || layout == 'collection_detail' || layout == 'content' || layout == 'masonry' || layout == 'kanban' || layout == 'bracket')
       ? ''
-      : buildCss('layout', position, 'collapse', collapse)
+      : `layout_${position}_collapse_${collapse}`
 
   const layoutChildren = React.Children.toArray(children)
 

data/app/pb_kits/playbook/pb_layout/body.rb

@@ -8,7 +8,7 @@ module Playbook
                  default: "div"
 
       def classname
-        generate_classname("layout_body")
+        "layout_body"
       end
     end
   end

data/app/pb_kits/playbook/pb_layout/footer.rb

@@ -8,7 +8,7 @@ module Playbook
                  default: "div"
 
       def classname
-        generate_classname("layout_footer")
+        "layout_footer"
       end
     end
   end

data/app/pb_kits/playbook/pb_layout/header.rb

@@ -8,7 +8,7 @@ module Playbook
                  default: "div"
 
       def classname
-        generate_classname("layout_header")
+        "layout_header"
       end
     end
   end

data/app/pb_kits/playbook/pb_layout/item.rb

@@ -8,13 +8,7 @@ module Playbook
                   default: "sm"
 
       def classname
-        generate_classname("layout_item") + size_class
-      end
-
-    private
-
-      def size_class
-        " size_#{size}"
+        "layout_item layout_item_size_#{size}"
       end
     end
   end

data/app/pb_kits/playbook/pb_layout/layout.rb

@@ -25,38 +25,29 @@ module Playbook
       def classname
         case layout
         when "collection"
-          generate_classname("pb_layout_kit", layout)
+          "pb_layout_kit_collection"
         when "kanban"
-          generate_classname("pb_layout_kit", layout, responsive_class)
+          classes = ["pb_layout_kit_kanban"]
+          classes << "pb_layout_kit_kanban_responsive" if responsive
+          classes.join(" ")
         when "collection_detail"
-          generate_classname("pb_layout_kit", layout)
+          "pb_layout_kit_collection_detail"
         when "content"
-          generate_classname("pb_layout_kit", layout)
+          "pb_layout_kit_content"
         when "masonry"
-          generate_classname("pb_layout_kit", layout)
+          "pb_layout_kit_masonry"
         else
-          first_class = generate_classname("pb_layout_kit_sidebar", "size_#{size}", position, variant, transparent_class)
-          [first_class, full_class, collapse_class].reject(&:empty?).join(" ")
+          # Sidebar layout
+          classes = [
+            "pb_layout_kit_sidebar",
+            "pb_layout_kit_sidebar_size_#{size}_#{position}_#{variant}",
+          ]
+          classes << "pb_layout_kit_sidebar_transparent" if transparent
+          classes << "pb_layout_kit_sidebar_full" if full
+          classes << "layout_#{position}_collapse_#{collapse}"
+          classes.join(" ")
         end
       end
-
-    private
-
-      def responsive_class
-        responsive ? "responsive" : ""
-      end
-
-      def full_class
-        full ? "full" : ""
-      end
-
-      def transparent_class
-        transparent ? "transparent" : nil
-      end
-
-      def collapse_class
-        "layout_#{position}_collapse_#{collapse}"
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_layout/layout.test.js

@@ -68,11 +68,11 @@ test("render all layout variants", () => {
     },
     {
       layout: "collection_detail",
-      expected: "pb_layout_kit_collection_detail_size_md_left_light",
+      expected: "pb_layout_kit_collection_detail",
     },
     {
       layout: "content",
-      expected: "pb_layout_kit_content_size_md_left_light",
+      expected: "pb_layout_kit_content",
     },
     {
       layout: "kanban",
@@ -80,7 +80,7 @@ test("render all layout variants", () => {
     },
     {
       layout: "masonry",
-      expected: "pb_layout_kit_masonry_size_md_left_light",
+      expected: "pb_layout_kit_masonry",
     },
     {
       layout: "bracket",

data/app/pb_kits/playbook/pb_layout/sidebar.rb

@@ -4,7 +4,7 @@ module Playbook
   module PbLayout
     class Sidebar < Playbook::KitBase
       def classname
-        generate_classname("layout_sidebar")
+        "layout_sidebar"
       end
     end
   end

data/app/pb_kits/playbook/pb_legend/_legend.scss

@@ -19,7 +19,7 @@
   }
 }
 
-[class^=pb_legend_kit] {
+.pb_legend_kit {
   @include indicator-colors($data_colors);
   @include indicator-colors($status_colors);
   @include indicator-colors($product_colors);

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

@@ -3,7 +3,7 @@
 @import "../tokens/typography";
 @import "../tokens/border_radius";
 
-[class^=pb_link_kit]{
+.pb_link_kit{
   @include pb_link($primary);
   &:hover {
     color: $text_lt_default;
@@ -40,7 +40,7 @@
   }
 
   @each $dark_color_name, $dark_color_value in $pb_dark_link_colors{
-    &[class*=_#{$dark_color_name}][class*=dark]{
+    &[class*=_#{$dark_color_name}].dark{
       @include pb_link($dark_color_value);
       
       &:hover {
@@ -53,11 +53,11 @@
     }
   }
 
-  &[class*=_underline] {
+  &._underline {
     text-decoration: underline;
   }
 
-  &[class*=_disabled] {
+  &._disabled {
     pointer-events: none;
     cursor: default;
     color: $text_lt_lighter;

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

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

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

@@ -1,19 +1,19 @@
 @import "../pb_body/body";
 @import "../pb_icon/icon";
 
-[class^=pb_loading_inline_kit] {
+.pb_loading_inline_kit {
   display: flex;
   align-items: baseline;
 
-  &[class*=_center] {
+  &._center {
     justify-content: center;
   }
 
-  &[class*=_left] {
+  &._left {
     justify-content: flex-start;
   }
 
-  &[class*=_right] {
+  &._right {
     justify-content: flex-end;
   }
 }

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

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

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

@@ -12,7 +12,7 @@
       margin-left: $space-xs;
     }
 
-    [class^=pb_flex_] {
+    .pb_flex_ {
       width: 100%;
     }
 
@@ -25,7 +25,7 @@
     }
   }
 
-  &[class*=_avatar] {
+  &._avatar {
     .content_wrapper {
       margin-left: $space-xs;
     }

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

@@ -16,7 +16,7 @@
       border-color: $error;
     }
   }
-  [class*=pb_body_kit_negative] {
+  .pb_body_kit_negative {
     margin-top: $space_xxs;
   }
 }
@@ -110,7 +110,7 @@
           border-color: $error_dark;
         }
       }
-      [class*=pb_body_kit_negative] {
+      .pb_body_kit_negative {
         color: $error_dark;
       }
     }

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

@@ -8,7 +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");
 
-[class^=pb_multiple_users_kit] {
+.pb_multiple_users_kit {
   display: inline-flex;
 
   .multiple_users_badge_xs,
@@ -60,7 +60,7 @@ $pb_multiple_users_size_xxs: map-get($avatar-sizes, "xxs");
     }
   }
 
-  &[class*=_reverse] {
+  &._reverse {
     flex-direction: row-reverse;
 
     .pb_multiple_users_item {

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

@@ -89,7 +89,7 @@ $positions: (
   }
 }
 
-[class^=pb_multiple_users_stacked_kit] {
+.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;
-  [class^=pb_avatar_kit].pb_multiple_users_stacked_item {
+  .pb_avatar_kit.pb_multiple_users_stacked_item {
     @include avatar-size($stacked_size);
     &.dark {
       .avatar_wrapper {
@@ -117,10 +117,10 @@ $positions: (
       }
     }
   }
-  &[class*=_single] .pb_multiple_users_stacked_item {
+  &._single .pb_multiple_users_stacked_item {
     @include avatar-size(28px);
   }
-  [class^=pb_avatar_kit].second_item, [class^=pb_badge_kit].second_item {
+  .pb_avatar_kit.second_item, .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 {
-      &[class*=_bubble_][class*=_size_#{$size_name}] {
+      &._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;
         }
   
-        [class^=pb_avatar_kit].pb_multiple_users_stacked_item {
+        .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: (
           }
         }
   
-        [class^=pb_avatar_kit] {
+        .pb_avatar_kit {
           // First Item
           &.first_item {
             @include position(map-get(map-get($positions, 'first-item-double'), $size_name));
@@ -235,8 +235,8 @@ $positions: (
           }
         }
         
-        &[class*=_single_bubble] {
-          [class^=pb_avatar_kit].first_item {
+        &._single_bubble {
+          .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;
 
-  [class*=pb_nav_list_kit_item][class*=pb_nav_list_item]{
-    &[class*=_link] {
-      &[class*=_active] {
+  .pb_nav_list_kit_item.pb_nav_list_item{
+    &._link {
+      &._active {
         background-color: $primary;
         color: $white;
         box-shadow: $shadow_deep;
         @media (hover:hover) {
           &:hover {
             background-color: darken($primary, 4%);
-            [class*=_text],[class*=_icon] {
+            ._text,._icon {
               color: $white;
             }
           }
         }
-        [class*=_text],[class*=_icon] {
+        ._text,._icon {
           font-weight: $bolder;
         }
       }
@@ -23,9 +23,9 @@
   }
 
   .dark & {
-    [class*=pb_nav_list_kit_item][class*=pb_nav_list_item] {
-      &[class*=_link] {
-        &[class*=_active] {
+    .pb_nav_list_kit_item.pb_nav_list_item {
+      &._link {
+        &._active {
           box-shadow: 0 2px 10px 0 $shadow_dark;
         }
       }

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

@@ -20,7 +20,7 @@ $pb_online_status_statuses: (
   primary: $primary,
 );
 
-[class^=pb_online_status_kit] {
+.pb_online_status_kit {
   box-sizing: content-box;
   width: $pb_online_status_size;
   height: $pb_online_status_size;
@@ -51,7 +51,7 @@ $pb_online_status_statuses: (
     }
   }
 
-  &[class*=_no_border] {
+  &._no_border {
     border-width: 0;
     border-style: none;
   }

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

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

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

@@ -9,7 +9,7 @@
     display: inline;
   }
 
-  [class*=show-below-] {
+  .show-below- {
     display: none;
   }
   @each $breakpoint_name, $breakpoint in $breakpoints {

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

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

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

@@ -5,7 +5,7 @@
 
 $pb_pill_height: 22px;
 
-[class^=pb_pill_kit] {
+.pb_pill_kit {
   display: inline-flex;
   justify-content: center;
   align-items: center;
@@ -14,11 +14,11 @@ $pb_pill_height: 22px;
   border-radius: $pb_pill_height/2;
   white-space: nowrap;
 
-  &[class*=lowercase] {
+  &.lowercase {
     text-transform: lowercase;
   }
 
-  &[class*=none] {
+  &.none {
     text-transform: none;
   }
 

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

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