playbook_ui 15.3.0.pre.alpha.PLAY260211779 → 15.3.0.pre.alpha.play2464flexitemcantusehtmloptions12226

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

@@ -82,32 +82,62 @@ module Playbook
         end
       end
 
-      # Get original column definition for custom rendering
+      # Get original column definition for custom rendering by accessor
       def find_original_column_def(accessor)
         find_column_def_by_accessor(column_definitions, accessor)
       end
 
+      # Get original column definition for custom rendering by id
+      def find_original_column_def_by_id(id)
+        find_column_def_by_id(column_definitions, id)
+      end
+
       # Check if a header cell has a custom renderer
       def has_header_renderer?(cell)
-        return false unless cell[:accessor].present?
-
-        original_def = find_original_column_def(cell[:accessor])
-        original_def && original_def[:header].present?
+        original_def = find_original_column_def_for_cell(cell)
+        original_def&.dig(:header).present?
+      rescue
+        false
       end
 
       # Render custom header content
       def render_header(cell)
         return cell[:label] unless has_header_renderer?(cell)
 
-        original_def = find_original_column_def(cell[:accessor])
+        original_def = find_original_column_def_for_cell(cell)
+        return cell[:label] unless original_def
+
         custom_renderer = original_def[:header]
+        return cell[:label] unless custom_renderer
 
         # Call the custom renderer with the cell data and label
-        custom_renderer.call(cell, cell[:label])
+        begin
+          result = custom_renderer.call(cell, cell[:label])
+          result.present? ? result.to_s : cell[:label]
+        rescue
+          cell[:label]
+        end
       end
 
     private
 
+      # Find the original column definition for a cell
+      def find_original_column_def_for_cell(cell)
+        # Try accessor first (for leaf columns)
+        if cell[:accessor].present?
+          found = find_original_column_def(cell[:accessor])
+          return found if found
+        end
+
+        # Try id if accessor lookup didn't find it (for grouped columns or leaf columns with id)
+        if cell[:id].present?
+          found = find_original_column_def_by_id(cell[:id])
+          return found if found
+        end
+
+        nil
+      end
+
       def compute_max_depth(columns)
         columns.map do |col|
           col[:columns] ? 1 + compute_max_depth(col[:columns]) : 1
@@ -118,21 +148,24 @@ module Playbook
         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] << {
+          nested_columns = col[:columns]
+          if nested_columns
+            colspan = compute_leaf_columns(nested_columns)
+            cell_hash = {
               label: col[:label],
               colspan: colspan,
               is_last_in_group: is_last && current_depth.positive?,
             }
+            cell_hash[:id] = col[:id] if col[:id].present?
+            rows[current_depth] << cell_hash
 
-            process_columns(col[:columns], rows, current_depth + 1, max_depth)
+            process_columns(nested_columns, rows, current_depth + 1, max_depth)
           else
-            raw_styling       = col[:column_styling] || {}
-            header_alignment  = raw_styling[:header_alignment]
+            raw_styling = col[:column_styling] || {}
+            header_alignment = raw_styling[:header_alignment]
 
             colspan = 1
-            rows[current_depth] << {
+            cell_hash = {
               label: col[:label],
               colspan: colspan,
               accessor: col[:accessor],
@@ -140,6 +173,8 @@ module Playbook
               is_last_in_group: is_last && current_depth.positive?,
               header_alignment: header_alignment,
             }
+            cell_hash[:id] = col[:id] if col[:id].present?
+            rows[current_depth] << cell_hash
           end
         end
       end
@@ -154,11 +189,15 @@ module Playbook
         max_depth = compute_max_depth(column_definitions)
 
         column_definitions.map do |col|
-          if col.key?(:columns)
-            {
+          if col[:columns]
+            nested_columns = col[:columns]
+            wrapped = {
               label: col[:label],
-              columns: wrap_leaf_columns(col[:columns]),
+              columns: wrap_leaf_columns(nested_columns),
             }
+            wrapped[:id] = col[:id] if col[:id].present?
+            wrapped[:header] = col[:header] if col[:header].present?
+            wrapped
           else
             # For leaf columns, wrap with empty labels up to max depth to get proper structure
             wrap_leaf_column(col, max_depth)
@@ -173,6 +212,7 @@ module Playbook
           sort_menu: col[:sort_menu] || nil,
           column_styling: col[:column_styling] || {},
         }
+        wrapped[:id] = col[:id] if col[:id].present?
         (max_depth - 1).times do
           wrapped = { label: "", columns: [wrapped] }
         end
@@ -180,11 +220,41 @@ module Playbook
       end
 
       def find_column_def_by_accessor(defs, target_accessor)
+        return nil if target_accessor.blank?
+
         defs.each do |col|
-          return col if col[:accessor] == target_accessor
+          col_accessor = col[:accessor]
+          next if col_accessor.blank?
+
+          return col if col_accessor.to_s == target_accessor.to_s
+
+          nested_columns = col[:columns]
+          if nested_columns.is_a?(Array)
+            found = find_column_def_by_accessor(nested_columns, target_accessor)
+            return found if found
+          end
+        end
+        nil
+      end
+
+      def find_column_def_by_id(defs, target_id)
+        return nil if target_id.blank?
+
+        defs.each do |col|
+          col_id = col[:id]
+
+          return col if col_id.present? && col_id.to_s == target_id.to_s
+
+          # Recursively search nested columns, even if current col has no id or doesn't match
+          nested_columns = col[:columns]
+
+          next unless nested_columns.present?
+
+          # Convert to array if needed (for edge cases where is_a?(Array) might fail)
+          array_columns = Array(nested_columns)
 
-          if col[:columns].is_a?(Array)
-            found = find_column_def_by_accessor(col[:columns], target_accessor)
+          if array_columns.any?
+            found = find_column_def_by_id(array_columns, target_id)
             return found if found
           end
         end

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

@@ -39,7 +39,7 @@ module Playbook
       end
 
       def classname
-        generate_classname("pb_table_tr", "bg-white", subrow_depth_classname, separator: " ")
+        generate_classname("pb_table_tr", "pb-bg-row-white", subrow_depth_classname, separator: " ")
       end
 
       def td_classname(column, index)
@@ -79,15 +79,44 @@ module Playbook
         cell_background_color(column).present?
       end
 
+      def cell_font_color(column)
+        return nil unless column[:accessor].present?
+
+        orig_def = find_column_def_by_accessor(column_definitions, column[:accessor])
+        if orig_def && orig_def[:column_styling].is_a?(Hash) && orig_def[:column_styling][:font_color].present?
+          font_color = orig_def[:column_styling][:font_color]
+          if font_color.respond_to?(:call)
+            font_color.call(row)
+          else
+            font_color
+          end
+        end
+      end
+
       # Uses a regular table/table_cell component if there is no custom background color; if there is a cell_background_color uses a background component with tag "td"
       def cell_component_info(column, index, bg_color, font_color)
+        column_font_color = cell_font_color(column)
+        effective_font_color = column_font_color || font_color
+
         if has_custom_background_color?(column)
           custom_bg_color = cell_background_color(column)
           component_name = "background"
-          component_props = { background_color: custom_bg_color, tag: "td", classname: td_classname(column, index) }
+          component_props = {
+            background_color: custom_bg_color,
+            tag: "td",
+            classname: td_classname(column, index),
+          }
+          component_props[:html_options] = { style: { color: effective_font_color } } if effective_font_color.present?
         else
           component_name = "table/table_cell"
-          component_props = { html_options: { style: { "background-color": bg_color, color: font_color } }, classname: td_classname(column, index) }
+          style_hash = { "background-color": bg_color }
+          style_hash[:color] = effective_font_color if effective_font_color.present?
+          component_props = {
+            html_options: {
+              style: style_hash,
+            },
+            classname: td_classname(column, index),
+          }
         end
 
         { name: component_name, props: component_props }

data/app/pb_kits/playbook/pb_background/background.html.erb

@@ -1,3 +1,11 @@
+<% 
+  html_options_style = ""
+  if object.html_options[:style].is_a?(Hash)
+    html_options_style = object.html_options[:style].map { |k, v| "#{k.to_s.tr('_', '-')}: #{v}" }.join("; ")
+  elsif object.html_options[:style].is_a?(String)
+    html_options_style = object.html_options[:style]
+  end
+%>
 <% if object.image_url.present? %>
   <%= pb_content_tag(object.tag,
       style: "background-image: url('#{object.image_url}');
@@ -9,8 +17,8 @@
   <% end %>
 <% else %>
   <%= pb_content_tag(object.tag,
-      style: object.custom_background_color
+      style: "#{object.custom_background_color}#{html_options_style.present? ? "; #{html_options_style}" : ""}"
   ) do %>
     <%= content.presence %>
   <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_background/docs/_background_category.md

@@ -1 +1 @@
-Category colors can be passed into the background kit. Values `category_1` to `category_21` are accepted. List of all category and status colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">here</a>.
+Category colors can be passed into the background kit. Values `category_1` to `category_21` are accepted. List of all category and status colors can be viewed <a href="https://playbook.powerapp.cloud/tokens/colors" target="_blank">here</a>.

data/app/pb_kits/playbook/pb_badge/_badge.tsx

@@ -20,11 +20,12 @@ type BadgeProps = {
     onTouchEnd?: React.TouchEventHandler<HTMLSpanElement>,
   },
   data?: {[key: string]: string},
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void) | ((event: any) => void) | any},
   id?: string,
   removeIcon?: boolean,
   removeOnClick?: React.MouseEventHandler<HTMLSpanElement>,
   rounded?: boolean,
+  tabIndex?: number,
   text?: string,
   variant?: "error" | "info" | "neutral" | "notification" | "notificationError" | "primary" | "success" | "warning",
 } & GlobalProps
@@ -39,6 +40,7 @@ const Badge = (props: BadgeProps): React.ReactElement => {
     removeIcon = false,
     removeOnClick,
     rounded = false,
+    tabIndex,
     text,
     variant = 'neutral',
   } = props
@@ -61,6 +63,7 @@ const Badge = (props: BadgeProps): React.ReactElement => {
         {...htmlProps}
         className={css}
         id={id}
+        tabIndex={tabIndex}
     >
       <span>
         {text}

data/app/pb_kits/playbook/pb_badge/badge.test.js

@@ -112,3 +112,16 @@ test('displays notification variants', () => {
     cleanup()
   })
 })
+
+test('should allow tabIndex to be set', () => {
+  render(
+    <Badge
+        data={{ testid: testId }}
+        tabIndex={0}
+        text="+1"
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveAttribute('tabIndex', '0')
+})

data/app/pb_kits/playbook/pb_card/docs/_card_background.md

@@ -1 +1 @@
-Add a background color by passing the color name to background. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">here</a> under Product Colors and Status: Subtle Variations.
+Add a background color by passing the color name to background. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/tokens/colors" target="_blank">here</a> under Product Colors and Status: Subtle Variations.

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

@@ -1 +1 @@
-Card headers pass category, product, status and background colors only. List of all category, product, status and background colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">here</a>.
+Card headers pass category, product, status and background colors only. List of all category, product, status and background colors can be viewed <a href="https://playbook.powerapp.cloud/token/colors" target="_blank">here</a>.

data/app/pb_kits/playbook/pb_card/docs/_card_highlight.md

@@ -1 +1 @@
-Card highlight can pass status, product, and category colors. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">here</a>.
+Card highlight can pass status, product, and category colors. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/token/colors" target="_blank">here</a>.

data/app/pb_kits/playbook/pb_card/docs/_card_light.md

@@ -1 +1 @@
-Card can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">visual guidelines.</a>  
+Card can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/global_props/max_width" target="_blank">visual guidelines.</a>  

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

@@ -11,7 +11,7 @@ import Title from '../pb_title/_title'
 type CurrencyProps = {
   abbreviate?: boolean,
   align?: 'center' | 'left' | 'right',
-  amount: string,
+  amount: string | number,
   aria?: {[key:string]:string},
   className?: string,
   dark?: boolean,
@@ -59,6 +59,19 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     commaSeparator = false,
   } = props
 
+  // Convert numeric input to string format
+  const convertAmount = (input: string | number): string => {
+    if (typeof input === 'number') {
+      if (input === 0 && !nullDisplay) {
+        return ""
+      }
+      return input.toFixed(2)
+    }
+    return input
+  }
+
+  const currencyAmount = convertAmount(amount)
+
   const emphasizedClass = emphasized ? '' : '_deemphasized'
 
   let variantClass
@@ -68,7 +81,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     variantClass = '_bold'
   }
 
-  const [whole, decimal = '00'] = amount.split('.')
+  const [whole, decimal = '00'] = currencyAmount.split('.')
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
@@ -92,19 +105,19 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     return isAmount ? num.slice(0, -1) : isUnit ? num.slice(-1) : ''
   }
 
-  const getMatchingDecimalAmount = decimals === "matching" ? amount : whole
+  const getMatchingDecimalAmount = decimals === "matching" ? currencyAmount : whole
   const getMatchingDecimalValue = decimals === "matching" ? '' : `.${decimal}`
 
   const formatAmount = (amount: string) => {
     if (!commaSeparator) return amount;
-    
+
     const [wholePart, decimalPart] = amount.split('.');
     const formattedWhole = new Intl.NumberFormat('en-US').format(parseInt(wholePart));
     return decimalPart ? `${formattedWhole}.${decimalPart}` : formattedWhole;
   }
 
   const swapNegative = size === "sm" && symbol !== ""
-  const handleNegative = amount.startsWith("-") && swapNegative ? "-" : ""
+  const handleNegative = currencyAmount.startsWith("-") && swapNegative ? "-" : ""
   const getAbsoluteAmount = (amountString: string) => amountString.replace(/^-/,'')
   const getAbbrOrFormatAmount = abbreviate ? getAbbreviatedValue('amount') : formatAmount(getMatchingDecimalAmount)
   const getAmount = swapNegative ? getAbsoluteAmount(getAbbrOrFormatAmount) : getAbbrOrFormatAmount
@@ -152,7 +165,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
               >
                 {handleNegative}{symbol}
               </Body>
-      
+
               <Title
                   className="pb_currency_value"
                   dark={dark}
@@ -160,7 +173,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
               >
                 {getAmount}
               </Title>
-      
+
               <Body
                   className="unit"
                   color="light"

data/app/pb_kits/playbook/pb_currency/currency.rb

@@ -17,8 +17,7 @@ module Playbook
       prop :symbol, type: Playbook::Props::String,
                     default: "$"
 
-      prop :amount, type: Playbook::Props::String,
-                    required: true
+      prop :amount, required: true
 
       prop :unit, type: Playbook::Props::String,
                   required: false
@@ -92,7 +91,7 @@ module Playbook
       end
 
       def negative_sign
-        amount.starts_with?("-") && swap_negative ? "-" : ""
+        currency_amount.starts_with?("-") && swap_negative ? "-" : ""
       end
 
       def body_props
@@ -117,10 +116,32 @@ module Playbook
         end
       end
 
+      def currency_amount
+        @currency_amount ||= convert_amount(amount)
+      end
+
     private
 
+      # Convert numeric input to string format
+      def convert_amount(input)
+        if input.is_a?(Numeric)
+          if input.zero? && null_display.nil?
+            ""
+          else
+            format("%.2f", input)
+          end
+        # Handle string representations of zero
+        elsif input.to_s.strip.match?(/^-?0+(\.0+)?$/) && null_display.nil?
+          ""
+        else
+          input.to_s
+        end
+      end
+
       def whole_value
-        value = amount.split(".").first
+        return "" if currency_amount.blank?
+
+        value = currency_amount.split(".").first
         if comma_separator
           number_with_delimiter(value.gsub(",", ""))
         else
@@ -129,7 +150,9 @@ module Playbook
       end
 
       def decimal_value
-        amount.split(".")[1] || "00"
+        return "00" if currency_amount.blank?
+
+        currency_amount.split(".")[1] || "00"
       end
 
       def units_element
@@ -147,7 +170,9 @@ module Playbook
       end
 
       def abbreviated_value(index = 0..-2)
-        value = amount.split(".").first.gsub(",", "").to_i
+        return "" if currency_amount.blank?
+
+        value = currency_amount.split(".").first.gsub(",", "").to_i
         abbreviated_num = number_to_human(value, units: { thousand: "K", million: "M", billion: "B", trillion: "T" }).gsub(/\s+/, "")
         abbreviated_num[index]
       end
@@ -174,9 +199,11 @@ module Playbook
 
         if decimals == "matching"
           if comma_separator
-            number_with_delimiter(amount.gsub(",", ""))
+            return "" if currency_amount.blank?
+
+            number_with_delimiter(currency_amount.gsub(",", ""))
           else
-            amount
+            currency_amount
           end
         else
           whole_value

data/app/pb_kits/playbook/pb_currency/currency.test.js

@@ -133,3 +133,50 @@ test('handles negative amounts correctly', () => {
   expect(screen.getByTestId('test-negative-no-symbol')).toHaveTextContent('-400.50')
   expect(screen.getByTestId('test-negative-medium-size')).toHaveTextContent('$-500.55')
 })
+
+test('handles numeric amounts correctly', () => {
+  render(
+    <>
+      <Currency
+          amount={320}
+          data={{ testid: 'test-numeric-default' }}
+      />
+      <Currency
+          abbreviate
+          amount={3200000}
+          data={{ testid: 'test-numeric-millions' }}
+      />
+      <Currency
+          amount={123456.78}
+          commaSeparator
+          data={{ testid: 'test-numeric-comma-decimals' }}
+      />
+      <Currency
+          amount={400.50}
+          data={{ testid: 'test-numeric-no-symbol' }}
+          symbol=""
+      />
+      <Currency
+          amount={500.55}
+          data={{ testid: 'test-numeric-medium-size' }}
+          size="md"
+      />
+      <Currency
+          amount={-600.70}
+          data={{ testid: 'test-numeric-negative' }}
+      />
+      <Currency
+          amount={0.00}
+          data={{ testid: 'test-numeric-null' }}
+      />
+    </>
+  )
+
+  expect(screen.getByTestId('test-numeric-default')).toHaveTextContent('$320')
+  expect(screen.getByTestId('test-numeric-millions')).toHaveTextContent('$3.2M')
+  expect(screen.getByTestId('test-numeric-comma-decimals')).toHaveTextContent('$123,456.78')
+  expect(screen.getByTestId('test-numeric-no-symbol')).toHaveTextContent('400.50')
+  expect(screen.getByTestId('test-numeric-medium-size')).toHaveTextContent('$500.55')
+  expect(screen.getByTestId('test-numeric-negative')).toHaveTextContent('-$600.70')
+  expect(screen.getByTestId('test-numeric-null')).toHaveTextContent('$.00')
+})

data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.html.erb

@@ -7,7 +7,7 @@
 }) %>
 
 <%= pb_rails("currency", props: {
-  amount: "342",
+  amount: 342,
   label: "Light",
   margin_bottom: "md",
   size: "sm",

data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.jsx

@@ -14,7 +14,7 @@ const CurrencyVariants = (props) => {
           {...props}
       />
       <Currency
-          amount="342"
+          amount={342}
           label="Light"
           marginBottom="md"
           size="sm"

data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.md

@@ -0,0 +1 @@
+**NOTE:** The value passed into the `amount` prop can be either a string or numeric value.

data/app/pb_kits/playbook/pb_date_picker/date_picker.rb

@@ -85,6 +85,8 @@ module Playbook
                              default: ""
       prop :sync_end_with, type: Playbook::Props::String,
                            default: ""
+      prop :cursor, type: Playbook::Props::String,
+                    default: "pointer"
 
       def classname
         default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts

@@ -350,8 +350,14 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
   if (syncStartWith) {
     picker.config.onClose.push((selectedDates: string) => {
       if (selectedDates?.length) {
-        const quickpick = (document.querySelector(`#${syncStartWith}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
-        quickpick?.clear();
+        const element = document.querySelector(`#${syncStartWith}`) as any;
+        // Check if it's a Dropdown QuickPick (has _dropdownRef) or DatePicker QuickPick (has _flatpickr)
+        if (element?._dropdownRef?.current) {
+          element._dropdownRef.current.clearSelected();
+        } else {
+          const quickpick = element?._flatpickr;
+          quickpick?.clear();
+        }
       }
     });
   }
@@ -360,8 +366,14 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
   if (syncEndWith) {
     picker.config.onClose.push((selectedDates: string) => {
       if (selectedDates?.length) {
-        const quickpick = (document.querySelector(`#${syncEndWith}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
-        quickpick?.clear();
+        const element = document.querySelector(`#${syncEndWith}`) as any;
+        // Check if it's a Dropdown QuickPick (has _dropdownRef) or DatePicker QuickPick (has _flatpickr)
+        if (element?._dropdownRef?.current) {
+          element._dropdownRef.current.clearSelected();
+        } else {
+          const quickpick = element?._flatpickr;
+          quickpick?.clear();
+        }
       }
     });
   }

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_and_dropdown_range.jsx

@@ -0,0 +1,38 @@
+import React from "react";
+import Dropdown from "../../pb_dropdown/_dropdown";
+import DatePicker from "../../pb_date_picker/_date_picker";
+
+const DatePickerAndDropdownRange = (props) => {
+  return (
+    <>
+      <Dropdown
+          controlsEndId="end-date-picker1"
+          controlsStartId="start-date-picker1"
+          id="dropdown-as-quickpick"
+          label="Date Range"
+          marginBottom="sm"
+          placeholder="Select a Date Range"
+          variant="quickpick"
+          {...props}
+      /> 
+
+      <DatePicker
+          label="Start Date"
+          pickerId="start-date-picker1"
+          placeholder="Select a Start Date"
+          syncStartWith="dropdown-as-quickpick"
+          {...props}
+      />
+
+      <DatePicker
+          label="End Date"
+          pickerId="end-date-picker1"
+          placeholder="Select an End Date"
+          syncEndWith="dropdown-as-quickpick"
+          {...props}
+      />
+    </>
+  );
+};
+
+export default DatePickerAndDropdownRange;