playbook_ui 14.25.0.pre.alpha.testingcss9751 → 14.25.0.pre.alpha.testingcss9796

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 230cb771b16126875e87e626e53cd633a26cbe4b65e0e9100405e72dd53a4f87
-  data.tar.gz: 7f513c46accbd0f95a5092ce5f1c60ca2cdec020e413407bfae0ec11ba0d5574
+  metadata.gz: 2bedb56f538523718e8f5b7f585a2670de123f7beb3f2fc42224751cc4ce5638
+  data.tar.gz: 8228f719bffa4de746fc494c2a38c5e2dbdbe676c7696f3b7566013997c2dd93
 SHA512:
-  metadata.gz: 24028e6570bc44e5665a2f6dd2c4b034fbc2dc6fc0d28fa664714540893c344e1246b013d9ee78fb281d503e76440879ceeecdb90c794986b658c03e07b3b2d9
-  data.tar.gz: 889ea6030813ab4ad291437fb20841beb46eb742c46fed355f74b730ed14f76c1c36bac0004c489c54b6b839806d9fc1de0122b6129d8720160ee58a76017c52
+  metadata.gz: ad617882ed8a3ce22a8a824a3ec1b86f8c526bbd57a903d9e116e894bce32833ffc57813fc54f23ddaf3e0a9a6e2be264f9d288d1eacd34aec365126419970b1
+  data.tar.gz: a69a24578b65fa9ca6a9c5255e6d9340073acfc7215b2d82fd3ed55c965cd45d7c27fcf4628d4f8bb0ad043d5c9c2752be3debe7378e843dadc5ae05d874fd8e

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_copy_button/copy_button.test.jsx

@@ -38,27 +38,27 @@ it('copies the value to clipboard and pastes it into an input', async () => {
 })
 
 test('passes text and tooltip props to button', () => {
-  // render(
-  //     <CopyButton
-  //         data={{ testid: 'text-test' }}
-  //         text={"text"}
-  //         tooltipPlacement="right"
-  //         tooltipText="Text copied!"
-  //         value="copy"
-  //     />
-  // )
+  render(
+      <CopyButton
+          data={{ testid: 'text-test' }}
+          text={"text"}
+          tooltipPlacement="right"
+          tooltipText="Text copied!"
+          value="copy"
+      />
+  )
 
-  // const content = screen.getByText("text")
-  // expect(content).toHaveTextContent("text")
+  const content = screen.getByText("text")
+  expect(content).toHaveTextContent("text")
 
-  // const kit = screen.getByTestId('text-test')
-  // const button = kit.querySelector('.pb_button_kit_primary_inline_enabled')
-  // expect(button).toBeInTheDocument()
+  const kit = screen.getByTestId('text-test')
+  const button = kit.querySelector('.pb_button_kit.pb_button_primary.pb_button_inline.pb_button_enabled')
+  expect(button).toBeInTheDocument()
 
-  // fireEvent.click(button)
-  // const tooltipContent = screen.getByText("Text copied!")
-  // expect(tooltipContent).toHaveTextContent("Text copied!")
+  fireEvent.click(button)
+  const tooltipContent = screen.getByText("Text copied!")
+  expect(tooltipContent).toHaveTextContent("Text copied!")
 
-  // const tooltip = kit.querySelector('.pb_tooltip_kit')
-  // expect(tooltip).toBeInTheDocument()
+  const tooltip = kit.querySelector('.pb_tooltip_kit')
+  expect(tooltip).toBeInTheDocument()
 })

data/app/pb_kits/playbook/pb_currency/_currency.scss

@@ -14,7 +14,7 @@
   &.pb_currency_kit_center_md,
   &.pb_currency_kit_center_lg {
     text-align: center;
-    & > .pb_caption_kit,
+    & > .pb_caption_kit,font-weight
     & > .pb_title_kit,
     & > .pb_body_kit {
       text-align: center;
@@ -82,7 +82,7 @@
 
     &.pb_currency_wrapper_bold {
       .pb_body_kit,
-      .pb_body_light {
+      .pb_body_kit_light {
         color: $text_lt_default;
         font-weight: $bolder;
       }

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_flex/flex.rb

@@ -50,58 +50,18 @@ module Playbook
                   default: false
 
       def classname
-        [
-          "pb_flex_kit",
-          orientation_class,
-          justify_class,
-          align_class,
-          inline_class,
-          reverse_class,
-          wrap_class,
-          spacing_class,
-          gap_class,
-          row_gap_class,
-          column_gap_class,
-          align_self_class,
-          prop(:classname),
-          spacing_props,
-          dark_props,
-          width_props,
-          min_width_props,
-          max_width_props,
-          gap_props,
-          z_index_props,
-          number_spacing_props,
-          shadow_props,
-          line_height_props,
-          display_props,
-          cursor_props,
-          flex_direction_props,
-          flex_wrap_props,
-          justify_content_props,
-          justify_self_props,
-          align_items_props,
-          align_content_props,
-          align_self_props,
-          flex_props,
-          flex_grow_props,
-          flex_shrink_props,
-          order_props,
-          position_props,
-          hover_props,
-          border_radius_props,
-          text_align_props,
-          overflow_props,
-          truncate_props,
-          left_props,
-          top_props,
-          right_props,
-          bottom_props,
-          vertical_align_props,
-          height_props,
-          min_height_props,
-          max_height_props,
-        ].compact.flatten.join(" ")
+        generate_classname("pb_flex_kit",
+                           orientation_class,
+                           justify_class,
+                           align_class,
+                           inline_class,
+                           reverse_class,
+                           wrap_class,
+                           spacing_class,
+                           gap_class,
+                           row_gap_class,
+                           column_gap_class,
+                           align_self_class, separator: " ")
       end
 
     private

data/app/pb_kits/playbook/pb_flex/flex_item.rb

@@ -17,52 +17,7 @@ module Playbook
                           default: false
 
       def classname
-        [
-          "pb_flex_item_kit",
-          fixed_size_class,
-          grow_class,
-          shrink_class,
-          display_flex_class,
-          align_self_class,
-          prop(:classname),
-          spacing_props,
-          dark_props,
-          width_props,
-          min_width_props,
-          max_width_props,
-          gap_props,
-          z_index_props,
-          number_spacing_props,
-          shadow_props,
-          line_height_props,
-          display_props,
-          cursor_props,
-          flex_direction_props,
-          flex_wrap_props,
-          justify_content_props,
-          justify_self_props,
-          align_items_props,
-          align_content_props,
-          align_self_props,
-          flex_props,
-          flex_grow_props,
-          flex_shrink_props,
-          order_props,
-          position_props,
-          hover_props,
-          border_radius_props,
-          text_align_props,
-          overflow_props,
-          truncate_props,
-          left_props,
-          top_props,
-          right_props,
-          bottom_props,
-          vertical_align_props,
-          height_props,
-          min_height_props,
-          max_height_props,
-        ].compact.flatten.join(" ")
+        generate_classname("pb_flex_item_kit", fixed_size_class, grow_class, shrink_class, display_flex_class, align_self_class, separator: " ")
       end
 
       def inline_styles

data/app/pb_kits/playbook/pb_image/_image.scss

@@ -52,8 +52,8 @@ $image-sizes: (
 
 @each $name, $size in $image-sizes {
   .pb_image_kit_size_#{$name} {
-    width: $size;
-    height: $size;
+    width: $size !important;
+    height: $size !important;
     object-fit: cover;
     position: relative;
     flex-shrink: 0;

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) {