playbook_ui 14.25.0.pre.alpha.testingcss9751 → 14.25.0.pre.alpha.testingcss9752

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 230cb771b16126875e87e626e53cd633a26cbe4b65e0e9100405e72dd53a4f87
-  data.tar.gz: 7f513c46accbd0f95a5092ce5f1c60ca2cdec020e413407bfae0ec11ba0d5574
+  metadata.gz: ed4f1f3a70cc4486f199424e2ae5e69500be2c1a780404209f74a2097e731c10
+  data.tar.gz: a3bf85967f71684e48fbe4af27a02dbdfd14bf2abcd58542e18386c70ef44bf3
 SHA512:
-  metadata.gz: 24028e6570bc44e5665a2f6dd2c4b034fbc2dc6fc0d28fa664714540893c344e1246b013d9ee78fb281d503e76440879ceeecdb90c794986b658c03e07b3b2d9
-  data.tar.gz: 889ea6030813ab4ad291437fb20841beb46eb742c46fed355f74b730ed14f76c1c36bac0004c489c54b6b839806d9fc1de0122b6129d8720160ee58a76017c52
+  metadata.gz: 2135a3bf51467e881b09d6cad8b060b4b706387aa9f0b6902813bc8ceb4f2b61b121341a0a8b2614886629f57117bda38d494ebf5328a904d2ea817a872bc17a
+  data.tar.gz: 3e664ad9bca844566163a9e2558241765db4aa66f3589e3f02de654677189972e81d4cfd9a981c54d5a75103edd2f7b18aa0f9dad69c42133f581bad46875ca7

data/app/pb_kits/playbook/pb_card/_card.scss

@@ -1,55 +1,40 @@
 @import "card_mixin";
 @import "../utilities/colors";
+@import "../tokens/border_radius";
 
-// Main card selector - matches all pb_card_kit classes
-[class^="pb_card_kit"] {
+.pb_card_kit {
   @include pb_card;
   padding: $space_md;
 
-  // Selected state
-  &[class*="_selected"] {
-    @include pb_card_selected;
-  }
-
-  // Dark theme
-  &.dark {
-    @include pb_card_dark;
-
-    &[class*="_selected"] {
-      @include pb_card_selected_dark;
-    }
-  }
-
-  // Border none variants
-  &[class*="_border_none"] {
-    border-width: 0px;
+  .card_draggable_handle {
+    align-self: center;
+    color: $text_lt_light;
   }
+}
 
-  // Highlight variants
-  &[class*="_highlight"] {
-    overflow: hidden;
-  }
+// Selected state
+.pb_card_kit_selected {
+  @include pb_card_selected;
+}
 
-  &[class*="_highlight_top"] {
-    @each $color_name, $color_value in $pb_card_highlight_colors {
-      &[class*="_highlight_#{$color_name}"]::before {
-        @include pb_card_highlight(100%, $pb_card_highlight_size, $color_value);
-      }
-    }
+// Dark mode
+.pb_card_kit.dark {
+  @include pb_card_dark;
+  
+  &.pb_card_kit_selected {
+    @include pb_card_selected_dark;
   }
+}
 
-  &[class*="_highlight_side"] {
-    @each $color_name, $color_value in $pb_card_highlight_colors {
-      &[class*="_highlight_#{$color_name}"]::before {
-        @include pb_card_highlight($pb_card_highlight_size, 100%, $color_value);
-      }
-    }
-  }
+// Border styles
+.pb_card_kit_border_none {
+  border-width: 0px;
+}
 
-  .card_draggable_handle {
-    align-self: center;
-    color: $text_lt_light;
-  }
+// Highlight styles
+.pb_card_kit_highlight_top,
+.pb_card_kit_highlight_side {
+  overflow: hidden;
 }
 
 @function ends-with($string, $suffix) {
@@ -60,8 +45,22 @@
   @return str-slice($string, -$suffix-length) == $suffix;
 }
 
-// Header styles
-[class^="pb_card_header_kit"] {
+// Highlight top variants
+@each $color_name, $color_value in $pb_card_highlight_colors {
+  .pb_card_kit_highlight_top.pb_card_kit_highlight_#{$color_name}::before {
+    @include pb_card_highlight(100%, $pb_card_highlight_size, $color_value);
+  }
+}
+
+// Highlight side variants  
+@each $color_name, $color_value in $pb_card_highlight_colors {
+  .pb_card_kit_highlight_side.pb_card_kit_highlight_#{$color_name}::before {
+    @include pb_card_highlight($pb_card_highlight_size, 100%, $color_value);
+  }
+}
+
+// Card Header
+.pb_card_header_kit {
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: auto;
@@ -70,45 +69,72 @@
   border: 0;
   border-radius: $pb_card_header_border_radius $pb_card_header_border_radius 0px 0px;
   
-  @each $color_name, $color_value in $pb_card_header_colors {
-    @if not ends-with($color_name, '_subtle') {
-      &[class*="_#{$color_name}"] {
-        @include pb_card_header_color($color_value);
-        color: lightenText($color_value);
-      }
-    }
+  // Inherit border radius from parent card
+  .pb_card_kit_border_radius_xs & {
+    border-radius: $border_radius_xs $border_radius_xs 0px 0px;
   }
-  
-  @each $color_name, $color_value in $pb_card_header_colors {
-    @if ends-with($color_name, '_subtle') {
-      &[class*="_#{$color_name}"] {
-        @include pb_card_header_color($color_value);
-        color: lightenText($color_value);
-      }
+  .pb_card_kit_border_radius_sm & {
+    border-radius: $border_radius_sm $border_radius_sm 0px 0px;
+  }
+  .pb_card_kit_border_radius_md & {
+    border-radius: $border_radius_md $border_radius_md 0px 0px;
+  }
+  .pb_card_kit_border_radius_lg & {
+    border-radius: $border_radius_lg $border_radius_lg 0px 0px;
+  }
+  .pb_card_kit_border_radius_xl & {
+    border-radius: $border_radius_xl $border_radius_xl 0px 0px;
+  }
+  .pb_card_kit_border_radius_rounded & {
+    border-radius: $border_radius_rounded $border_radius_rounded 0px 0px;
+  }
+  .pb_card_kit_border_radius_none & {
+    border-radius: 0px;
+  }
+}
+
+// Header colors (non-subtle)
+@each $color_name, $color_value in $pb_card_header_colors {
+  @if not ends-with($color_name, '_subtle') {
+    .pb_card_header_kit_#{$color_name} {
+      @include pb_card_header_color($color_value);
+      color: lightenText($color_value);
     }
   }
-  
-  @each $color_name, $color_value in $pb_card_header_colors {
-    &[class*="_#{$color_name}_striped"] {
-      @if ((type-of($color_value) == color)) {
-        background: repeating-linear-gradient(
-          45deg,
-          $color_value,
-          $color_value 10px,
-          lighten( $color_value, 5% ) 10px,
-          lighten( $color_value, 5% ) 20px
-        );
-      }
+}
+
+// Header colors (subtle)
+@each $color_name, $color_value in $pb_card_header_colors {
+  @if ends-with($color_name, '_subtle') {
+    .pb_card_header_kit_#{$color_name} {
+      @include pb_card_header_color($color_value);
+      color: lightenText($color_value);
     }
   }
-  
-  &[class*="_white"] {
-    border-bottom: 1px solid $border_light;
+}
+
+// Header striped patterns
+@each $color_name, $color_value in $pb_card_header_colors {
+  .pb_card_header_kit_#{$color_name}_striped {
+    @if ((type-of($color_value) == color)) {
+      background: repeating-linear-gradient(
+        45deg,
+        $color_value,
+        $color_value 10px,
+        lighten( $color_value, 5% ) 10px,
+        lighten( $color_value, 5% ) 20px
+      );
+    }
   }
 }
 
-// Body styles
-[class^="pb_card_body_kit"] {
+// White header special case
+.pb_card_header_kit_white {
+  border-bottom: 1px solid $border_light;
+}
+
+// Card Body
+.pb_card_body_kit {
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: auto;

data/app/pb_kits/playbook/pb_card/_card.tsx

@@ -5,7 +5,7 @@ import { get } from '../utilities/object'
 
 import classnames from 'classnames'
 
-import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
+import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { GlobalProps, globalProps, globalInlineProps } from '../utilities/globalProps'
 import type { ProductColors, CategoryColors, BackgroundColors, StatusColors } from '../types/colors'
 
@@ -54,7 +54,14 @@ type CardBodyProps = {
 // Header component
 const Header = (props: CardHeaderProps) => {
   const { children, className, headerColor = 'category_1', headerColorStriped = false } = props
-  const headerCSS = buildCss('pb_card_header_kit', `${headerColor}`, headerColorStriped ? 'striped' : '')
+  const headerColorCSS = `pb_card_header_kit_${headerColor}`
+  const headerStripedCSS = headerColorStriped ? `pb_card_header_kit_${headerColor}_striped` : ''
+  
+  const headerCSS = classnames(
+    'pb_card_header_kit',
+    headerColorCSS,
+    headerStripedCSS
+  )
 
   const headerSpacing = globalProps(props)
 
@@ -69,11 +76,10 @@ const Header = (props: CardHeaderProps) => {
 // Body component
 const Body = (props: CardBodyProps) => {
   const { children, className } = props
-  const bodyCSS = buildCss('pb_card_body_kit')
   const bodySpacing = globalProps(props)
 
   return (
-    <div className={classnames(bodyCSS, bodySpacing, className)}>
+    <div className={classnames('pb_card_body_kit', bodySpacing, className)}>
       {children}
     </div>
   )
@@ -96,13 +102,22 @@ const Card = (props: CardPropTypes): React.ReactElement => {
     selected = false,
     tag = 'div',
   } = props
-  const borderCSS = borderNone == true ? 'border_none' : ''
-  const selectedCSS = selected == true ? 'selected' : 'deselected'
-  const backgroundCSS = background == 'none' ? '' : `background_${background}`
-  const cardCss = buildCss('pb_card_kit', selectedCSS, borderCSS, `border_radius_${borderRadius}`, backgroundCSS, {
-    [`highlight_${highlight.position}`]: highlight.position,
-    [`highlight_${highlight.color}`]: highlight.color,
-  })
+  const borderCSS = borderNone == true ? 'pb_card_kit_border_none' : ''
+  const selectedCSS = selected == true ? 'pb_card_kit_selected' : ''
+  const backgroundCSS = background == 'none' ? '' : `pb_card_kit_background_${background}`
+  const borderRadiusCSS = borderRadius !== 'md' ? `pb_card_kit_border_radius_${borderRadius}` : ''
+  const highlightPositionCSS = highlight.position ? `pb_card_kit_highlight_${highlight.position}` : ''
+  const highlightColorCSS = highlight.color ? `pb_card_kit_highlight_${highlight.color}` : ''
+  
+  const cardCss = classnames(
+    'pb_card_kit', // Base class
+    selectedCSS,
+    borderCSS,
+    borderRadiusCSS,
+    backgroundCSS,
+    highlightPositionCSS,
+    highlightColorCSS
+  )
   const ariaProps: {[key: string]: string} = buildAriaProps(aria)
   const dataProps: {[key: string]: string} = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions);

data/app/pb_kits/playbook/pb_card/_card_mixin.scss

@@ -52,19 +52,19 @@ $pb_card_header_colors: map-merge(map-merge(map-merge($product_colors, $addition
   background-color: $white;
 
   @each $name, $color in $background_colors {
-    &[class*="_background_#{$name}"] {
+    &[class*=background_#{$name}] {
       background-color: $color;
     }
   };
 
   @each $name, $shadow in $box_shadows {
-    &[class*="_#{$name}"] {
+    &[class^=_#{$name}] {
       box-shadow: $shadow;
     }
   }
 
   @each $name, $radius in $border_radius {
-    &[class*="_border_radius_#{$name}"] {
+    &[class*=_#{$name}] {
       border-radius: $radius;
     }
   }

data/app/pb_kits/playbook/pb_card/card.rb

@@ -29,13 +29,14 @@ module Playbook
                                   default: nil
 
       def classname
-        generate_classname("pb_card_kit",
-                           selected_class,
-                           border_class,
-                           border_radius_class,
-                           background_class,
-                           highlight_position_class,
-                           highlight_color_class)
+        classes = ["pb_card_kit"]
+        classes << "pb_card_kit_selected" if selected
+        classes << "pb_card_kit_border_none" if border_none
+        classes << "pb_card_kit_border_radius_#{border_radius}" if border_radius != "md"
+        classes << "pb_card_kit_background_#{background}" if background != "none"
+        classes << "pb_card_kit_highlight_#{highlight[:position]}" if highlight[:position].present?
+        classes << "pb_card_kit_highlight_#{highlight[:color]}" if highlight[:color].present?
+        generate_classname(classes.compact.join(" "))
       end
 
     private

data/app/pb_kits/playbook/pb_card/card_header.rb

@@ -9,13 +9,17 @@ module Playbook
                                   default: false
 
       def classname
-        generate_classname("pb_card_header_kit", header_color, color_striped_classname)
+        generate_classname("pb_card_header_kit", header_color_classname, color_striped_classname, separator: " ")
       end
 
     private
 
       def color_striped_classname
-        header_color_striped ? "striped" : nil
+        header_color_striped ? "pb_card_header_kit_#{header_color}_striped" : nil
+      end
+
+      def header_color_classname
+        header_color ? "pb_card_header_kit_#{header_color}" : nil
       end
     end
   end

data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb

@@ -50,7 +50,7 @@
 <% end %>
 
 <%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
-  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "bg_dark" }) do %>
+  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "dark" }) do %>
     <%= pb_rails("body", props: { text: "Dark", dark: true }) %>
   <% end %>
   <%= pb_rails("card/card_body", props: { padding: "md" }) do %>

data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.scss

@@ -12,7 +12,7 @@
 .pb_date_stacked_kit_center_sm_dark_reverse,
 .pb_date_stacked_kit_center_md_dark_reverse {
   & > * .pb_title_kit,
-  & > * .pb_caption_kit,
+  & > * .pb_caption_kit_md,
   & > .pb_date_stacked_year_kit {
     text-align: center;
   }
@@ -28,7 +28,7 @@
 .pb_date_stacked_kit_right_sm_dark_reverse,
 .pb_date_stacked_kit_right_md_dark_reverse {
   & > * .pb_title_kit,
-  & > * .pb_caption_kit,
+  & > * .pb_caption_kit_md,
   & > .pb_date_stacked_year {
     text-align: right;
   }

data/app/pb_kits/playbook/pb_date_stacked/date_stacked.rb

@@ -18,7 +18,7 @@ module Playbook
                   default: false
 
       def classname
-        generate_classname("pb_date_stacked_kit", align, size, bold, reverse_class, dark_class)
+        generate_classname("pb_date_stacked_kit", align, size, reverse_class, dark_class)
       end
 
       def title_size

data/app/pb_kits/playbook/pb_draggable/draggable.test.jsx

@@ -235,7 +235,7 @@ test("generated dragHandle with Card", () => {
   render(<DraggableKitWithCard />);
   const kit = screen.getByTestId(testId);
 
-  const card = kit.querySelector(".pb_card_kit_deselected_border_radius_md");
+  const card = kit.querySelector(".pb_card_kit");
   expect(card).toBeInTheDocument();
   const dragHandle = card.querySelector(".pb_custom_icon");
   expect(dragHandle).toBeInTheDocument();

data/app/pb_kits/playbook/pb_dropdown/index.js

@@ -507,14 +507,14 @@ export default class PbDropdown extends PbEnhancedElement {
       // Create a form pill for each selected option
       const pill = document.createElement("div");
       const color = this.formPillProps.color || "primary";
-      pill.classList.add(`pb_form_pill_kit_${color}`, "mr_xs");
+      pill.classList.add("pb_form_pill_kit", `pb_form_pill_${color}`, "pb_form_pill_none", "mr_xs");
       if (this.formPillProps.size === "small") {
-        pill.classList.add("small");
+        pill.classList.add("pb_form_pill_small");
       }
       pill.tabIndex = 0;
       pill.dataset.pillId = JSON.parse(option).id;
       const innerDiv = document.createElement("h3");
-      innerDiv.className = "pb_title_kit_size_4 pb_form_pill_text";
+      innerDiv.className = "pb_title_kit pb_title_4 pb_form_pill_text";
       innerDiv.textContent = JSON.parse(option).label;
       pill.appendChild(innerDiv);
 

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

@@ -81,14 +81,20 @@ $bracket-border-width: 4px;
 
 // Collection detail layout
 .pb_layout_kit_collection_detail {
-  display: grid;
-  width: 100%;
-  height: 100%;
-  padding: $space_lg;
-  grid-template-areas:
-  "side-bar collection";
-  grid-template-columns: .25fr 1fr;
-  grid-column-gap: $space_sm;
+    display: grid;
+    width: 100%;
+    height: 100%;
+    padding: $space_lg;
+    grid-template-areas: "side-bar collection";
+    grid-template-columns: .25fr 1fr;
+    grid-column-gap: $space_sm;
+  .layout_body {
+    display: grid;
+    grid-auto-rows: max-content;
+    grid-column-gap: $space_sm;
+    grid-row-gap: $space_sm;
+    grid-template-columns: repeat(4, 1fr);
+  }
   
   div.layout_body {
     @media screen and (min-width: $screen-md-min) {

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

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

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

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

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

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

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

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

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

@@ -25,17 +25,17 @@ module Playbook
       def classname
         case layout
         when "collection"
-          "pb_layout_kit_collection"
+          generate_classname("pb_layout_kit_collection")
         when "kanban"
           classes = ["pb_layout_kit_kanban"]
           classes << "pb_layout_kit_kanban_responsive" if responsive
-          classes.join(" ")
+          generate_classname(classes.join(" "))
         when "collection_detail"
-          "pb_layout_kit_collection_detail"
+          generate_classname("pb_layout_kit_collection_detail")
         when "content"
-          "pb_layout_kit_content"
+          generate_classname("pb_layout_kit_content")
         when "masonry"
-          "pb_layout_kit_masonry"
+          generate_classname("pb_layout_kit_masonry")
         else
           # Sidebar layout
           classes = [
@@ -45,7 +45,7 @@ module Playbook
           classes << "pb_layout_kit_sidebar_transparent" if transparent
           classes << "pb_layout_kit_sidebar_full" if full
           classes << "layout_#{position}_collapse_#{collapse}"
-          classes.join(" ")
+          generate_classname(classes.join(" "))
         end
       end
     end

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

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

data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.scss

@@ -10,8 +10,8 @@
       background-color: $bg_light;
     }
   }
-  
-  .pb_item_kit_checked_item {
+
+  .checked_item {
     background-color: $active_light;
   }
 }

data/app/pb_kits/playbook/pb_source/_source.scss

@@ -7,8 +7,8 @@
     align-items: flex-start;
   }
 
-  .pb_icon_circle_kit,
-  .pb_avatar_kit {
+  .pb_icon_circle_kit_size_sm_default,
+  .pb_avatar_kit_size_sm {
     margin-right: $space-sm;
   }
 

data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.scss

@@ -1,35 +1,56 @@
 
-[class^=pb_time_range_inline_kit] {
-  &[class*=_center]  {
-    & > [class^=pb_caption],
-    & > [class^=pb_body] {
-      text-align: center;
-    }
-    & > [class*=pb_time_range_inline_wrapper] {
-      justify-content: center;
-    }
-  }
-  &[class*=_right] {
-    & > [class^=pb_caption],
-    & > [class^=pb_body] {
-      text-align: right;
-    }
-    & > [class*=pb_time_range_inline_wrapper] {
-      justify-content: flex-end;
-    }
-  }
-  [class^=pb_time_range_inline_wrapper] {
+@import "../tokens/spacing";
+
+// Base time range inline classes
+.pb_time_range_inline_kit_left,
+.pb_time_range_inline_kit_center,
+.pb_time_range_inline_kit_right,
+.pb_time_range_inline_kit_vertical {
+  .pb_time_range_inline_wrapper {
     display: flex;
     align-items: center;
-    [class*=pb_time_range_inline_arrow] {
+    .pb_time_range_inline_arrow {
       margin-left: $space_xs/2;
       margin-right: $space_xs/2;
     }
-    [class*=pb_time_range_inline_timezone] {
+    .pb_time_range_inline_timezone {
       margin-left: $space_xs/2;
     }
-    [class*=pb_time_range_inline_icon] {
+    .pb_time_range_inline_icon {
       margin-right: $space_xs/2;
     }
   }
+}
+
+// Center alignment
+.pb_time_range_inline_kit_center {
+  & > .pb_caption_kit,
+  & > .pb_body_kit {
+    text-align: center;
+  }
+  & > .pb_time_range_inline_wrapper {
+    justify-content: center;
+  }
+}
+
+// Right alignment
+.pb_time_range_inline_kit_right {
+  & > .pb_caption_kit,
+  & > .pb_body_kit {
+    text-align: right;
+  }
+  & > .pb_time_range_inline_wrapper {
+    justify-content: flex-end;
+  }
+}
+
+// Vertical alignment
+.pb_time_range_inline_kit_vertical {
+  & > .pb_caption_kit,
+  & > .pb_body_kit {
+    text-align: center;
+  }
+  & > .pb_time_range_inline_wrapper {
+    justify-content: center;
+  }
 }

data/app/pb_kits/playbook/pb_time_range_inline/time_range_inline.rb

@@ -16,7 +16,7 @@ module Playbook
       prop :timezone, default: false
 
       def classname
-        generate_classname("pb_time_range_inline_kit", dark_class, alignment)
+        generate_classname("pb_time_range_inline_kit", alignment)
       end
 
       def format_start_time_string