playbook_ui 14.10.0.pre.alpha.PBNTR662stickyrightcolumnreact5160 → 14.10.0.pre.alpha.PLAY1774timelinelabelstepspacing5274

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_icon_circle/_icon_circle.scss

@@ -14,16 +14,6 @@ $pb_icon_circle_sizes: (
   "xl":   100px,
 );
 
-@mixin svg_size($name, $match, $adjust) {
-  @if $name == $match {
-    $svg_xy: $adjust;
-    & > svg {
-      width: #{$svg_xy};
-      height: #{$svg_xy};
-    }
-  }
-}
-
 [class^=pb_icon_circle_kit] {
   display: flex;
   justify-content: center;
@@ -57,13 +47,11 @@ $pb_icon_circle_sizes: (
       border-radius: $size/2;
       background: $silver;
       color: $text_lt_light;
-      font-size: $size * 0.38;
+      font-size: if($name == "xxs", $size - 6px, $size * 0.38);
       line-height: $size;
       flex-shrink: 0;
       flex-grow: 0;
       flex-basis: $size;
-
-      @include svg_size($name, "xxs", $size - 6px);
     }
   }
 

data/app/pb_kits/playbook/pb_section_separator/_section_separator.scss

@@ -3,6 +3,11 @@
 @import "../tokens/opacity";
 @import "./section_separator_mixin";
 
+$merge_kits1: map-merge($status_colors, $category_colors);
+$merge_kits2: map-merge($merge_kits1, $product_colors);
+$merge_kits3: map-merge($merge_kits2, $text_colors);
+$section_selector_colors: map-merge($merge_kits3, $data_colors);
+
 $section_colors_light: (
   background:   $bg_light,
   card:         $card_light,
@@ -19,8 +24,11 @@ $section_colors_dark: (
   align-items: center;
   position: relative;
   span {
-    padding: 0 $space_xs;
+    padding: 0;
     display: flex;
+    [class*="pb_caption_kit"] {
+      padding: 0 $space_xs;
+    }
   }
   &::before {
     content: "";
@@ -34,12 +42,40 @@ $section_colors_dark: (
     flex: 1;
     @include section_separator_horizontal;
   }
+  @each $color_name, $color_value in $section_selector_colors {
+    &[class*="color_#{$color_name}"] {
+      &::before, &::after {
+        background: $color_value;
+      }
+
+      &[class*=_vertical] {
+        &::after {
+          background: $color_value;
+        }
+      }
+      &[class*=_dashed] {
+        &::before, &::after {
+          border: 1px dashed $color_value;
+        }
+        &[class*=_vertical] {
+          &::after {
+            border: 1px dashed $color_value;
+            background: none;
+          }
+        }
+      }
+    }
+  }
+
   &[class*=_horizontal] {
     justify-content: center;
   }
   &[class*=_vertical] {
     margin-left: $space_xs;
     margin-right: $space_xs;
+    &::before {
+      display: none;
+    }
     &::after {
       @include section_separator_vertical(false);
     }
@@ -54,6 +90,33 @@ $section_colors_dark: (
   // Dark =========================
 
   &.dark {
+    @each $color_name, $color_value in $section_selector_colors {
+      &[class*="color_#{$color_name}"] {
+        &::before, &::after {
+          background: $color_value;
+        }
+
+        &[class*=_vertical] {
+          &::after {
+            @include section_separator_vertical(false);
+            background: $color_value;
+          }
+        }
+
+        &[class*=_dashed] {
+          &::before, &::after {
+            border: 1px dashed $color_value;
+            background: none;
+          }
+          &[class*=_vertical] {
+            &::after {
+              border: 1px dashed $color_value;
+              background: none;
+            }
+          }
+        }
+      }
+    }
     &::before {
       @include section_separator_horizontal(true);
     }

data/app/pb_kits/playbook/pb_section_separator/_section_separator.tsx

@@ -10,6 +10,7 @@ type SectionSeparatorProps = {
   aria?: { [key: string]: string; },
   children?: React.ReactChild[] | React.ReactChild,
   className?: string,
+  color?: "default" | "primary",
   dark?: boolean,
   data?: { [key: string]: string; },
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
@@ -25,6 +26,7 @@ const SectionSeparator = (props: SectionSeparatorProps): React.ReactElement => {
     aria = {},
     children,
     className,
+    color ="default",
     data = {},
     htmlOptions = {},
     id,
@@ -37,7 +39,7 @@ const SectionSeparator = (props: SectionSeparatorProps): React.ReactElement => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
-  const classes = classnames(buildCss('pb_section_separator_kit', variant, orientation, lineStyle === "dashed" ? lineStyle : ""), globalProps(props), className)
+  const classes = classnames(buildCss('pb_section_separator_kit', variant, orientation, lineStyle === "dashed" ? lineStyle : "", color !== "default" ? `color_${color}` : ''), globalProps(props), className)
   const dynamicInlineProps = globalInlineProps(props)
 
   return (

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_color.html.erb

@@ -0,0 +1,10 @@
+<%= pb_rails("section_separator", props: { text: "Default Separator" }) %>
+<%= pb_rails("section_separator", props: { color: "primary", text: "Primary Separator" }) %>
+<%= pb_rails("section_separator", props: { color: "primary", line_style: "dashed", text: "Primary Dashed Separator" }) %>
+<%= pb_rails("section_separator", props: { color: "primary" }) do %>
+  <%= pb_rails("flex", props: { padding: "xs" }) do %>
+    <%= pb_rails("icon", props: { color: "primary", icon: "arrow-down" }) %>
+    <%= pb_rails("detail", props: { text: "Children", size: "sm", color: "link" }) %>
+  <% end %>
+<% end %>
+

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_color.jsx

@@ -0,0 +1,42 @@
+import React from "react"
+import { SectionSeparator, Flex, Detail, Icon } from "playbook-ui"
+
+const children = (
+  <Flex padding="xs">
+    <Icon color="primary"
+        icon="arrow-down"
+    />
+    <Detail
+        color="link"
+        size="sm"
+        text="Children"
+    />
+  </Flex>
+)
+
+const SectionSeparatorColor = (props) => {
+  return (
+    <div>
+      <SectionSeparator text="Default Separator"
+          {...props}
+      />
+      <SectionSeparator color="primary"
+          text="Primary Separator"
+          {...props}
+      />
+      <SectionSeparator
+          color="primary"
+          lineStyle="dashed"
+          text="Primary Dashed Separator"
+          {...props}
+      />
+       <SectionSeparator color="primary"
+           {...props}
+       >
+        {children}
+      </SectionSeparator>
+    </div>
+  )
+}
+
+export default SectionSeparatorColor

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_color.md

@@ -0,0 +1,3 @@
+Pass "primary" to the `color` prop to change any section separator color.
+
+**NOTE:** Passing `children` overrides any content provided via the `text` prop. The `color` prop does not affect the `text` prop's color, and the color of `children` is determined by the children's individual props. For greater control over text color customization, consider using a separator with `children`.

data/app/pb_kits/playbook/pb_section_separator/docs/example.yml

@@ -6,6 +6,7 @@ examples:
   - section_separator_text: Text Separator
   - section_separator_vertical: Vertical
   - section_separator_children: Children
+  - section_separator_color: Color
 
   react:
   - section_separator_line: Line Separator
@@ -13,6 +14,7 @@ examples:
   - section_separator_text: Text Separator
   - section_separator_vertical: Vertical
   - section_separator_children: Children
+  - section_separator_color: Color
 
   swift:
   - section_separator_line_swift: Line Separator

data/app/pb_kits/playbook/pb_section_separator/docs/index.js

@@ -3,3 +3,4 @@ export { default as SectionSeparatorText } from './_section_separator_text.jsx'
 export { default as SectionSeparatorVertical } from './_section_separator_vertical.jsx'
 export { default as SectionSeparatorDashed } from './_section_separator_dashed.jsx'
 export { default as SectionSeparatorChildren } from './_section_separator_children.jsx'
+export { default as SectionSeparatorColor } from './_section_separator_color.jsx'

data/app/pb_kits/playbook/pb_section_separator/section_separator.rb

@@ -3,6 +3,9 @@
 module Playbook
   module PbSectionSeparator
     class SectionSeparator < Playbook::KitBase
+      prop :color, type: Playbook::Props::Enum,
+                   values: %w[default primary],
+                   default: "default"
       prop :text
       prop :variant, type: Playbook::Props::Enum,
                      values: %w[card background],
@@ -17,7 +20,7 @@ module Playbook
                         default: "solid"
 
       def classname
-        generate_classname("pb_section_separator_kit", variant, orientation, line_style == "dashed" ? "dashed" : nil)
+        generate_classname("pb_section_separator_kit", variant, orientation, line_style == "dashed" ? "dashed" : nil, color != "default" ? "color_#{color}" : nil)
       end
 
     private

data/app/pb_kits/playbook/pb_skeleton_loading/_skeleton_loading.scss

@@ -1,8 +1,8 @@
 @import 'skeleton_loading_mixins';
 
 .pb_skeleton_loading {
-    display: "flex";
-    flex-direction: "column";
+    display: flex;
+    flex-direction: column;
     height: 100%;
     .color_default {
         @include skeleton-shimmer($silver);

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_description.md

@@ -0,0 +1,3 @@
+The Skeleton Loading kit can be used an intermediate loading state to give users a visual indication that content is loading. 
+
+**Please Note**: this kit is not meant to be integrated interally within other Playbook kits as a loading prop; rather, it can be used to create a composite of the section/kit/page with loading intermediataries, as demonstrated in the the "example component" doc examples.

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius.html.erb

@@ -0,0 +1,9 @@
+<%= pb_rails("flex", props: { justify: "evenly" }) do %>
+    <%= pb_rails("skeleton_loading", props: { border_radius: "rounded", height: "50px", width: "100px"}) %>
+    <%= pb_rails("skeleton_loading", props: { border_radius: "xl", height: "50px", width: "100px"}) %>
+    <%= pb_rails("skeleton_loading", props: { border_radius: "lg", height: "50px", width: "100px"}) %>
+    <%= pb_rails("skeleton_loading", props: { border_radius: "md", height: "50px", width: "100px"}) %>
+    <%= pb_rails("skeleton_loading", props: { height: "50px", width: "100px"}) %>
+    <%= pb_rails("skeleton_loading", props: { border_radius: "xs", height: "50px", width: "100px"}) %>
+    <%= pb_rails("skeleton_loading", props: { border_radius: "none", height: "50px", width: "100px"}) %>
+<% end %>

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius_rails.md

@@ -0,0 +1 @@
+The `border_radius` prop accepts all of our [BorderRadius](https://playbook.powerapp.cloud/visual_guidelines/border_radius) tokens, with `sm` as default.

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_color.html.erb

@@ -0,0 +1,7 @@
+<%= pb_rails("card", props: { border_none: true }) do %>
+    <%= pb_rails("skeleton_loading") %>
+<% end %>
+
+<%= pb_rails("card", props: { background: "light", border_none: true }) do %>
+    <%= pb_rails("skeleton_loading", props: { color: "white" }) %>
+<% end %>

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_default.html.erb

@@ -1 +1 @@
-<%= pb_rails("skeleton_loading") %>
+<%= pb_rails("skeleton_loading") %>