playbook_ui 14.25.0.pre.alpha.PLAY2419dialogaccessibility10271 → 14.25.0.pre.alpha.PLAY2422fixedconftoastaccessibility9840

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" | "collection_detail" | "kanban" | "content" | "masonry" | "bracket",
+  layout?: "sidebar" | "collection" | "kanban" | "content" | "masonry" | "bracket",
 } & GlobalProps
 
 type LayoutSideProps = {
@@ -81,10 +81,11 @@ 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', `layout_item_size_${size}`, globalProps(props), className)}
+        className={classnames('layout_item', sizeClass, globalProps(props), className)}
         style={dynamicInlineProps}
     >
       {children}
@@ -143,24 +144,20 @@ const Layout = (props: LayoutPropTypes) => {
   const htmlProps = buildHtmlProps(htmlOptions)
 
   const layoutCss =
-    (layout == 'collection' || layout == 'bracket' || layout == 'collection_detail' || layout == 'content' || layout == 'masonry')
+    (layout == 'collection' || layout == 'bracket')
       ? `pb_layout_kit_${layout}`
       : layout == 'kanban'
         ? `pb_layout_kit_${layout}${responsiveClass}`
-        : 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,
-            }
-          )
+        : buildCss(`pb_layout_kit_${layout}`, `size_${size}`, position, variant, {
+          dark: dark,
+          transparent: transparent,
+          full: full,
+        })
 
   const layoutCollapseCss =
-    (layout == 'collection' || layout == 'collection_detail' || layout == 'content' || layout == 'masonry' || layout == 'kanban' || layout == 'bracket')
+    (layout == 'collection' || layout == 'kanban' || layout == 'bracket')
       ? ''
-      : `layout_${position}_collapse_${collapse}`
+      : buildCss('layout', position, 'collapse', collapse)
 
   const layoutChildren = React.Children.toArray(children)
 

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

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

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

@@ -25,29 +25,38 @@ module Playbook
       def classname
         case layout
         when "collection"
-          generate_classname("pb_layout_kit_collection")
+          generate_classname("pb_layout_kit", layout)
         when "kanban"
-          classes = ["pb_layout_kit_kanban"]
-          classes << "pb_layout_kit_kanban_responsive" if responsive
-          generate_classname(classes.join(" "))
+          generate_classname("pb_layout_kit", layout, responsive_class)
         when "collection_detail"
-          generate_classname("pb_layout_kit_collection_detail")
+          generate_classname("pb_layout_kit", layout)
         when "content"
-          generate_classname("pb_layout_kit_content")
+          generate_classname("pb_layout_kit", layout)
         when "masonry"
-          generate_classname("pb_layout_kit_masonry")
+          generate_classname("pb_layout_kit", layout)
         else
-          # 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}"
-          generate_classname(classes.join(" "))
+          first_class = generate_classname("pb_layout_kit_sidebar", "size_#{size}", position, variant, transparent_class)
+          [first_class, full_class, collapse_class].reject(&:empty?).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",
+      expected: "pb_layout_kit_collection_detail_size_md_left_light",
     },
     {
       layout: "content",
-      expected: "pb_layout_kit_content",
+      expected: "pb_layout_kit_content_size_md_left_light",
     },
     {
       layout: "kanban",
@@ -80,7 +80,7 @@ test("render all layout variants", () => {
     },
     {
       layout: "masonry",
-      expected: "pb_layout_kit_masonry",
+      expected: "pb_layout_kit_masonry_size_md_left_light",
     },
     {
       layout: "bracket",

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

@@ -9,76 +9,26 @@
   background: $color;
 }
 
-// Base class for custom colors (no color suffix)
-.pb_legend_kit {
-  .pb_legend_indicator_circle_custom {
-    display: inline-block;
-    width: 10px;
-    height: 10px;
-    border-radius: 5px;
-  }
-}
-
-// Data colors
-@each $name, $color in $data_colors {
-  .pb_legend_kit_#{$name} {
-    .pb_legend_indicator_circle {
-      @include pb_button($color);
-    }
-    
-    .pb_legend_indicator_circle_custom {
-      display: inline-block;
-      width: 10px;
-      height: 10px;
-      border-radius: 5px;
+@mixin indicator-colors($colors-list) {
+  @each $name, $color in $colors-list {
+    &[class*=#{$name}] {
+      .pb_legend_indicator_circle {
+        @include pb_button($color);
+      }
     }
   }
 }
 
-// Status colors
-@each $name, $color in $status_colors {
-  .pb_legend_kit_#{$name} {
-    .pb_legend_indicator_circle {
-      @include pb_button($color);
-    }
-    
-    .pb_legend_indicator_circle_custom {
-      display: inline-block;
-      width: 10px;
-      height: 10px;
-      border-radius: 5px;
-    }
-  }
-}
+[class^=pb_legend_kit] {
+  @include indicator-colors($data_colors);
+  @include indicator-colors($status_colors);
+  @include indicator-colors($product_colors);
+  @include indicator-colors($category_colors);
 
-// Product colors
-@each $name, $color in $product_colors {
-  .pb_legend_kit_#{$name} {
-    .pb_legend_indicator_circle {
-      @include pb_button($color);
-    }
-    
-    .pb_legend_indicator_circle_custom {
-      display: inline-block;
-      width: 10px;
-      height: 10px;
-      border-radius: 5px;
-    }
+  .pb_legend_indicator_circle_custom {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
   }
 }
-
-// Category colors
-@each $name, $color in $category_colors {
-  .pb_legend_kit_#{$name} {
-    .pb_legend_indicator_circle {
-      @include pb_button($color);
-    }
-    
-    .pb_legend_indicator_circle_custom {
-      display: inline-block;
-      width: 10px;
-      height: 10px;
-      border-radius: 5px;
-    }
-  }
-}

data/app/pb_kits/playbook/pb_legend/legend.test.js

@@ -39,7 +39,7 @@ test('prefixText prop renders', () => {
   )
 
   const kit = screen.getByTestId('primary-test')
-  const prefix = kit.querySelector(".pb_title_kit.pb_title_4")
+  const prefix = kit.querySelector(".pb_title_kit_size_4")
   expect(prefix).toBeInTheDocument()
 })
 

data/app/pb_kits/playbook/pb_lightbox/lightbox.scss

@@ -66,18 +66,18 @@ $lightbox-z-index-floor: $z_10 !default;
   width: 100%;
   z-index: $lightbox-z-index-floor + 1;
 
-  .react-transform-wrapper {
+  [class^="react-transform-wrapper"] {
     flex-shrink: 0;
     width: 100%;
     height: 100%;
   }
 
-  .react-transform-content {
+  [class^="react-transform-content"] {
     width: 100%;
     height: 100%;
   }
 
-  .react-transform-component {
+  [class^="react-transform-component"] {
     width: 100%;
     height: 100%;
     img {
@@ -164,4 +164,4 @@ $lightbox-z-index-floor: $z_10 !default;
   align-items: center;
   background-color: white;
   box-shadow: 0 0 6px white;
-}
+}

data/app/pb_kits/playbook/pb_lightbox/lightbox.test.jsx

@@ -113,7 +113,7 @@ test('Closes on close button', async () => {
   )
 
   const kit = screen.getByTestId(testId)
-  const closeIcon = kit.querySelector('.pb_button_kit.pb_button_link.pb_button_inline.pb_button_enabled')
+  const closeIcon = kit.getElementsByClassName('pb_button_kit_link_inline_enabled')[0]
 
   fireEvent(
     closeIcon,

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

@@ -3,8 +3,7 @@
 @import "../tokens/typography";
 @import "../tokens/border_radius";
 
-// Base styles
-.pb_link_kit {
+[class^=pb_link_kit]{
   @include pb_link($primary);
   &:hover {
     color: $text_lt_default;
@@ -26,135 +25,42 @@
       color: $text_dk_default;
     }
   }
-}
-
-// Color variants
-@each $color_name, $color_value in $pb_link_colors {
-  @if $color_name != "default" {
-    .pb_link_kit_#{$color_name} {
+  @each $color_name, $color_value in $pb_link_colors {
+    &[class*=_#{"" + $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;
-      }
     }
   }
-}
 
-// 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);
+  @each $dark_color_name, $dark_color_value in $pb_dark_link_colors{
+    &[class*=_#{$dark_color_name}][class*=dark]{
+      @include pb_link($dark_color_value);
+      
       &:hover {
-        color: map-get($pb_link_hover_colors, $color_name);
+        color: map-get($pb_dark_link_hover_colors, $dark_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;
-      }
     }
   }
-}
 
-// 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;
-      }
-    }
+  &[class*=_underline] {
+    text-decoration: underline;
   }
-}
 
-// 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;
-      }
-    }
+  &[class*=_disabled] {
+    pointer-events: none;
+    cursor: default;
+    color: $text_lt_lighter;
   }
-}
+
+}

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

@@ -28,4 +28,4 @@
   &[class*=_layout_right] li {
     @include pb_list_layout_right;
   }
-}
+}

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

@@ -1,21 +1,19 @@
 @import "../pb_body/body";
 @import "../pb_icon/icon";
 
-.pb_loading_inline_kit_left,
-.pb_loading_inline_kit_center,
-.pb_loading_inline_kit_right {
+[class^=pb_loading_inline_kit] {
   display: flex;
   align-items: baseline;
-}
 
-.pb_loading_inline_kit_center {
-  justify-content: center;
-}
+  &[class*=_center] {
+    justify-content: center;
+  }
 
-.pb_loading_inline_kit_left {
-  justify-content: flex-start;
-}
+  &[class*=_left] {
+    justify-content: flex-start;
+  }
 
-.pb_loading_inline_kit_right {
-  justify-content: flex-end;
-}
+  &[class*=_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";
 
-.pb_map {
+[class*="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 pb_title_4">Hello World!</h4>`)) // add popup
+        .setPopup(new maplibregl.Popup({closeButton: false}).setHTML(`<h4 class="pb_title_kit_size_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 pb_title_4">Hello World!</h4>`)) // add popup
+        .setPopup(new maplibregl.Popup({closeButton: false}).setHTML(`<h4 class="pb_title_kit_size_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({closeButton: false}).setHTML(`<h4 class="pb_title_kit pb_title_4">Hello World!</h4>`)) // add popup
+        .setPopup(new maplibregl.Popup({className: 'map_popup', closeButton: false}).setHTML(`<h4 class="pb_title_kit_size_4">Hello World!</h4>`)) // add popup
         .addTo(map);
 
         //add maplibre default zoom controls

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;
       }
     }