playbook_ui 14.10.0.pre.alpha.play1662cssbargraph5214 → 14.10.0.pre.alpha.play16825244

data/app/pb_kits/playbook/pb_advanced_table/table_header.rb

@@ -16,6 +16,84 @@ module Playbook
       def th_classname
         generate_classname("table-header-cells", separator: " ")
       end
+
+      def header_rows
+        wrapped_columns = wrap_leaf_columns(column_definitions)
+
+        rows = []
+        max_depth = compute_max_depth(wrapped_columns)
+        max_depth.times { rows << [] }
+        process_columns(wrapped_columns, rows, 0, max_depth)
+        rows
+      end
+
+    private
+
+      def compute_max_depth(columns)
+        columns.map do |col|
+          col[:columns] ? 1 + compute_max_depth(col[:columns]) : 1
+        end.max || 1
+      end
+
+      def process_columns(columns, rows, current_depth, max_depth)
+        total_columns = columns.size
+        columns.each_with_index do |col, index|
+          is_last = index == total_columns - 1
+          if col[:columns]
+            colspan = compute_leaf_columns(col[:columns])
+            rows[current_depth] << {
+              label: col[:label],
+              colspan: colspan,
+              is_last_in_group: is_last && current_depth.positive?,
+            }
+
+            process_columns(col[:columns], rows, current_depth + 1, max_depth)
+          else
+            colspan = 1
+            rows[current_depth] << {
+              label: col[:label],
+              colspan: colspan,
+              accessor: col[:accessor],
+              sort_menu: col[:sort_menu],
+              is_last_in_group: is_last && current_depth.positive?,
+            }
+          end
+        end
+      end
+
+      def compute_leaf_columns(columns)
+        columns.reduce(0) do |sum, col|
+          col[:columns] ? sum + compute_leaf_columns(col[:columns]) : sum + 1
+        end
+      end
+
+      def wrap_leaf_columns(column_definitions)
+        max_depth = compute_max_depth(column_definitions)
+
+        column_definitions.map do |col|
+          if col.key?(:columns)
+            {
+              label: col[:label],
+              columns: wrap_leaf_columns(col[:columns]),
+            }
+          else
+            # For leaf columns, wrap with empty labels up to max depth to get proper structure
+            wrap_leaf_column(col, max_depth)
+          end
+        end
+      end
+
+      def wrap_leaf_column(col, max_depth)
+        wrapped = {
+          accessor: col[:accessor],
+          label: col[:label] || "",
+          sort_menu: col[:sort_menu] || nil,
+        }
+        (max_depth - 1).times do
+          wrapped = { label: "", columns: [wrapped] }
+        end
+        wrapped
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb

@@ -1,6 +1,7 @@
-<%= pb_content_tag do %>
+<%= pb_content_tag(:tr) do %>
         <% object.column_definitions.each_with_index do |column, index| %>
-            <%= pb_rails("table/table_cell", props: { tag:"div", classname:object.td_classname}) do %>
+            <% next unless column[:accessor].present? %>
+            <%= pb_rails("table/table_cell", props: { classname:object.td_classname(column)}) do %>
                 <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end" }) do %>
                     <% if collapsible_trail && index.zero? %>
                         <% (1..depth).each do |i| %>
@@ -13,7 +14,7 @@
                     <div style="padding-left: <%= depth * 1.25 %>em">
                         <%= pb_rails("flex", props:{align: "center", column_gap: "xs"}) do %>
                             <% if index.zero? && object.row[:children].present? %>
-                                <button id="<%= object.row.object_id.to_s + object.id %>" class="gray-icon expand-toggle-icon" data-advanced-table="true" >
+                                <button id="<%= "#{object.id}_#{object.row.object_id}" %>" class="gray-icon expand-toggle-icon" data-advanced-table="true" >
                                     <%= pb_rails("icon", props: { id: "advanced-table_open_icon", icon: "circle-play", cursor: "pointer" }) %> 
                                     <%= pb_rails("icon", props: { id: "advanced-table_close_icon", display: "none", icon: "circle-play", cursor: "pointer", rotation: 90 }) %>
                                 </button>

data/app/pb_kits/playbook/pb_advanced_table/table_row.rb

@@ -16,8 +16,10 @@ module Playbook
         generate_classname("pb_table_tr", "bg-white", subrow_depth_classname, separator: " ")
       end
 
-      def td_classname
-        generate_classname("id-cell", "chrome-styles", separator: " ")
+      def td_classname(column)
+        classes = %w[id-cell chrome-styles]
+        classes << "last-cell" if column[:is_last_in_group]
+        classes.join(" ")
       end
 
       def depth_accessors
@@ -29,6 +31,8 @@ module Playbook
     private
 
       def custom_renderer_value(column, index)
+        return nil unless column[:accessor].present?
+
         if index.zero?
           if depth.zero?
             row[column[:accessor].to_sym]
@@ -37,6 +41,7 @@ module Playbook
               key = item.to_sym
               return row[key] if depth - 1 == accessor_index
             end
+            nil
           end
         else
           row[column[:accessor].to_sym]

data/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.html.erb

@@ -1,10 +1,6 @@
-<%= content_tag(:div,
-      aria: object.aria,
-      class: object.classname,
-      data: object.data,
-      id: object.id) do %>
+<%= pb_content_tag(:div) do %>
         <% object.column_definitions.each_with_index do |column, index| %>
-            <%= pb_rails("table/table_cell", props: { tag: "div", classname: object.td_classname}) do %>
+            <%= pb_rails("table/table_cell", props: { classname: object.td_classname}) do %>
                 <%= pb_rails("flex", props:{ align: "center", justify: "start" }) do %>
                     <% if collapsible_trail && index.zero? %>
                         <% (1..depth).each do |i| %>

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

@@ -21,6 +21,14 @@
     border-width: 0px;
   }
 
+  @function ends-with($string, $suffix) {
+    $suffix-length: str-length($suffix);
+    @if $suffix-length == 0 {
+      @return true;
+    }
+    @return str-slice($string, -$suffix-length) == $suffix;
+  }
+
   [class^=pb_card_header_kit] {
     flex-grow: 0;
     flex-shrink: 0;
@@ -30,9 +38,19 @@
     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 {
-      &[class*=_#{"" + $color_name}] {
-        @include pb_card_header_color($color_value);
-        color: lightenText($color_value);
+      @if not ends-with($color_name, '_subtle') {
+        &[class*="_#{$color_name}"] {
+          @include pb_card_header_color($color_value);
+          color: lightenText($color_value);
+        }
+      }
+    }
+    @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);
+        }
       }
     }
     @each $color_name, $color_value in $pb_card_header_colors {

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

@@ -88,3 +88,21 @@
     Body
   <% end %>
 <% end %>
+
+<%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
+  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "success_subtle" }) do %>
+    <%= pb_rails("body", props: { text: "Success Subtle" }) %>
+  <% end %>
+  <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
+    Body
+  <% end %>
+<% end %>
+
+<%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
+  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "error_subtle" }) do %>
+    <%= pb_rails("body", props: { text: "Error Subtle"}) %>
+  <% end %>
+  <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
+    Body
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_card/docs/_card_header.jsx

@@ -231,6 +231,46 @@ const CardHeader = (props) => {
                     />
                 </Card.Body>
             </Card>
+
+            <Card
+                {...props}
+                marginBottom='sm'
+                padding="none"
+            >
+                <Card.Header
+                    headerColor="success_subtle"
+                >
+                    <Body
+                        text="Success Subtle"
+                    />
+                </Card.Header>
+                <Card.Body>
+                    <Body
+                        {...props}
+                        text="Body"
+                    />
+                </Card.Body>
+            </Card>
+
+            <Card
+                {...props}
+                marginBottom='sm'
+                padding="none"
+            >
+                <Card.Header
+                    headerColor="error_subtle"
+                >
+                    <Body
+                        text="Error Subtle"
+                    />
+                </Card.Header>
+                <Card.Body>
+                    <Body
+                        {...props}
+                        text="Body"
+                    />
+                </Card.Body>
+            </Card>
         </>
     )
 }

data/app/pb_kits/playbook/pb_timeline/_timeline.tsx

@@ -20,7 +20,7 @@ type TimelineProps = {
   id?: string,
   orientation?: string,
   showDate?: boolean,
-  gap?: 'xs' | 'sm' | 'md' | 'lg' | 'none',
+  item_gap?: 'xs' | 'sm' | 'md' | 'lg' | 'none',
 } & GlobalProps
 
 const Timeline = ({
@@ -32,15 +32,15 @@ const Timeline = ({
   id,
   orientation = 'horizontal',
   showDate = false,
-  gap = 'none',
+  item_gap = 'none',
   ...props
 }: TimelineProps): React.ReactElement => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
   const dateStyle = showDate === true ? '_with_date' : ''
-  const gapStyle = gap === 'none' ? '' : `gap_${gap}`
-  const timelineCss = buildCss('pb_timeline_kit', `${orientation}`, dateStyle, gapStyle)
+  const itemGapStyle = item_gap === 'none' ? '' : `gap_${item_gap}`
+  const timelineCss = buildCss('pb_timeline_kit', `${orientation}`, dateStyle, itemGapStyle)
 
   return (
     <div
@@ -60,4 +60,4 @@ Timeline.Step = TimelineStep
 Timeline.Label = TimelineLabel
 Timeline.Detail = TimelineDetail
 
-export default Timeline
+export default Timeline

data/app/pb_kits/playbook/pb_timeline/timeline.rb

@@ -8,15 +8,15 @@ module Playbook
                          default: "horizontal"
       prop :show_date, type: Playbook::Props::Boolean,
                        default: false
-      prop :gap, type: Playbook::Props::Enum,
-                 values: %w[xs sm md lg none],
-                 default: "none"
+      prop :item_gap, type: Playbook::Props::Enum,
+                      values: %w[xs sm md lg none],
+                      default: "none"
 
       def classname
         generate_classname("pb_timeline_kit",
                            orientation,
                            date_class,
-                           gap_class)
+                           item_gap_class)
       end
 
     private
@@ -25,8 +25,8 @@ module Playbook
         show_date ? "with_date" : nil
       end
 
-      def gap_class
-        gap == "none" ? nil : "gap_#{gap}"
+      def item_gap_class
+        item_gap == "none" ? nil : "gap_#{item_gap}"
       end
     end
   end

data/app/pb_kits/playbook/utilities/_gap.scss

@@ -0,0 +1,29 @@
+@import "spacing";
+
+.gap_none {
+  gap: 0;
+}
+
+.gap_xxs {
+  gap: $space_xxs;
+}
+
+.gap_xs {
+  gap: $space_xs;
+}
+
+.gap_sm {
+  gap: $space_sm;
+}
+
+.gap_md {
+  gap: $space_md;
+}
+
+.gap_lg {
+  gap: $space_lg;
+}
+
+.gap_xl {
+  gap: $space_xl;
+}

data/app/pb_kits/playbook/utilities/globalPropNames.mjs

@@ -27,6 +27,7 @@ export default [
   "overflow",
   "order",
   "numberSpacing",
+  "gap",
   "maxWidth",
   "minWidth",
   "width",

data/app/pb_kits/playbook/utilities/globalProps.ts

@@ -108,6 +108,10 @@ type MinWidth = {
   minWidth?: string,
 }
 
+type Gap = {
+  gap?: string,
+}
+
 type NumberSpacing = {
   numberSpacing?: "tabular",
 }
@@ -196,7 +200,7 @@ type MinHeight = {
 export type GlobalProps = AlignContent & AlignItems & AlignSelf &
   BorderRadius & Cursor & Dark & Display & DisplaySizes & Flex & FlexDirection &
   FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
-  LineHeight & Margin & Width & MinWidth & MaxWidth & NumberSpacing & Order & Overflow & Padding &
+  LineHeight & Margin & Width & MinWidth & MaxWidth & Gap & NumberSpacing & Order & Overflow & Padding &
   Position & Shadow & TextAlign & Truncate & VerticalAlign & ZIndex & { hover?: string } & Top & Right & Bottom & Left & Height & MaxHeight & MinHeight;
 
 const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => {
@@ -372,6 +376,11 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     css += maxWidth ? `max_width_${filterClassName(maxWidth)} ` : ''
     return css.trimEnd()
   },
+  gapProps: ({ gap }: Gap) => {
+    let css = ''
+    css += gap ? `gap_${gap} ` : ''
+    return css.trimEnd()
+  },
   minHeightProps: ({ minHeight }: MinHeight) => {
     const heightValues = ["auto", "xs", "sm", "md", "lg", "xl", "xxl", "xxxl"]
     if (heightValues.includes(minHeight)) {
@@ -530,15 +539,15 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
   },
 
 
-  topProps: ({top}) => getPositioningPropsClasses('top', top), 
+  topProps: ({top}) => getPositioningPropsClasses('top', top),
+
+  rightProps: ({right}) => getPositioningPropsClasses('right', right),
 
-  rightProps: ({right}) => getPositioningPropsClasses('right', right), 
+  bottomProps:({bottom}) =>  getPositioningPropsClasses('bottom', bottom),
 
-  bottomProps:({bottom}) =>  getPositioningPropsClasses('bottom', bottom), 
-  
   leftProps: ({left}) => getPositioningPropsClasses('left', left),
-    
-  
+
+
   textAlignProps: ({ textAlign }: TextAlign) => {
     if (typeof textAlign === 'object') {
       return getResponsivePropClasses(textAlign, 'text_align')
@@ -558,7 +567,7 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
 
 const PROP_INLINE_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => {[key: string]: any}} = {
   heightProps: ({ height }: Height) => {
-    return height ? { height } : {}; 
+    return height ? { height } : {};
   },
 
   maxHeightProps: ({ maxHeight }: MaxHeight) => {
@@ -566,7 +575,7 @@ const PROP_INLINE_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => {[
   },
 
   minHeightProps: ({ minHeight }: MinHeight) => {
-    return minHeight ? { minHeight } : {}; 
+    return minHeight ? { minHeight } : {};
   },
 }