playbook_ui 16.7.0 → 16.8.0.pre.alpha.PLAY2935formbuilderrequiredindicatorbug16780

data/app/pb_kits/playbook/pb_advanced_table/docs/_playground.overrides.json

@@ -34,11 +34,6 @@
         "columnDefinitionsFile": "advanced_table_column_definitions_standard.json",
         "tableDataFile": "advanced_table_mock_data_no_subrows.json"
       },
-      "pagination": {
-        "label": "Pagination Example",
-        "columnDefinitionsFile": "advanced_table_column_definitions_standard.json",
-        "tableDataFile": "advanced_table_pagination_mock_data.json"
-      },
       "with_ids": {
         "label": "Data with row IDs",
         "columnDefinitionsFile": "advanced_table_column_definitions_standard.json",
@@ -80,15 +75,15 @@
     "sortControl",
     "fullScreenControl",
     "expandedControl",
-    "allowFullScreen"
+    "allowFullScreen",
+    "pagination",
+    "paginationProps"
   ],
   "requiredProps": {
     "columnDefinitionsFile": "advanced_table_column_definitions_standard.json",
     "tableDataFile": "advanced_table_mock_data.json"
   },
   "propSyncOnEnable": {
-    "pagination": { "dataPreset": "pagination" },
-    "paginationProps": { "dataPreset": "pagination" },
     "inlineRowLoading": { "dataPreset": "inline_loading" },
     "selectableRows": { "dataPreset": "with_ids" },
     "onRowSelectionChange": { "dataPreset": "with_ids" },
@@ -144,10 +139,8 @@
       ]
     },
     {
-      "name": "Pagination & Loading",
+      "name": "Loading",
       "props": [
-        "pagination",
-        "paginationProps",
         "loading",
         "inlineRowLoading",
         "initialLoadingRowsCount"
@@ -215,12 +208,6 @@
         "enableSorting": true
       }
     },
-    {
-      "name": "With Pagination",
-      "props": {
-        "pagination": true
-      }
-    },
     {
       "name": "Selectable Rows",
       "props": {
@@ -260,11 +247,6 @@
     }
   ],
   "conditionals": {
-    "paginationProps": {
-      "requires": {
-        "pagination": true
-      }
-    },
     "initialLoadingRowsCount": {
       "requires": {
         "loading": true
@@ -350,13 +332,6 @@
       "message": "Header sorting UI is only applied in \"Subcomponent Structure\" mode (explicit Header and Body). For sorting by column, pass columnDefinitions with enableSort: true to the columnDefinitions array. Click 'sorting by column' to see an example.",
       "type": "info"
     },
-    "pagination_info": {
-      "when": {
-        "pagination": true
-      },
-      "message": "Use paginationProps to customize page size and appearance.",
-      "type": "info"
-    },
     "selectable_info": {
       "when": {
         "selectableRows": true
@@ -396,7 +371,7 @@
     },
     "column_styling_info": {
       "presetName": "Column Styling",
-      "message": "This sample uses columnStyling on column definitions. You can style headers and cells for the whole table or per column.",
+      "message": "This sample uses columnStyling on column definitions. Year uses width for a fixed hierarchy column; other columns show background colors. See the Column Styling Width doc for minWidth and min/pref/max bands.",
       "type": "info"
     }
   }

data/app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_column_definitions_styling.json

@@ -2,7 +2,10 @@
   {
     "accessor": "year",
     "label": "Year",
-    "cellAccessors": ["quarter", "month", "day"]
+    "cellAccessors": ["quarter", "month", "day"],
+    "columnStyling": {
+      "width": 124
+    }
   },
   {
     "accessor": "newEnrollments",

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

@@ -3,6 +3,7 @@ examples:
   - advanced_table_beta: Default (Required Props)
   - advanced_table_loading: Loading State
   - advanced_table_beta_subrow_headers: SubRow Headers
+  - advanced_table_enable_toggle_expansion_rails: Enable Toggle Expansion
   - advanced_table_collapsible_trail_rails: Collapsible Trail
   - advanced_table_table_props: Table Props
   - advanced_table_sticky_header_rails: Sticky Header
@@ -52,6 +53,7 @@ examples:
   - advanced_table_table_props_sticky_header: Sticky Header for Responsive Table
   - advanced_table_sticky_columns: Sticky Columns
   - advanced_table_sticky_columns_and_header: Sticky Columns with Sticky Header
+  - advanced_table_sticky_scroll_limitation: Sticky Header and Column Scroll Limitation
   - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell: Custom Components for Cells
   - advanced_table_with_custom_header: Custom Header Cell
@@ -80,6 +82,7 @@ examples:
   - advanced_table_row_styling: Row Styling
   - advanced_table_padding_control_per_row: Padding Control using Row Styling
   - advanced_table_column_styling: Column Styling
+  - advanced_table_column_styling_width: Column Styling Width
   - advanced_table_column_styling_column_headers: Column Styling with Multiple Headers
   - advanced_table_column_styling_background: Column Styling Background Color
   - advanced_table_column_styling_background_custom: Column Styling Background Color (Custom)

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

@@ -27,6 +27,7 @@ export { default as AdvancedTableFullscreen } from './_advanced_table_fullscreen
 export { default as AdvancedTableStickyColumns } from './_advanced_table_sticky_columns.jsx'
 export { default as AdvancedTableStickyHeader } from './_advanced_table_sticky_header.jsx'
 export { default as AdvancedTableStickyColumnsAndHeader } from './_advanced_table_sticky_columns_and_header.jsx'
+export { default as AdvancedTableStickyScrollLimitation } from './_advanced_table_sticky_scroll_limitation.jsx'
 export { default as AdvancedTableExpandByDepth } from './_advanced_table_expand_by_depth.jsx'
 export { default as AdvancedTableColumnBorderColor} from './_advanced_table_column_border_color.jsx'
 export { default as AdvancedTableColumnVisibility } from './_advanced_table_column_visibility.jsx'
@@ -37,6 +38,7 @@ export { default as AdvancedTablePinnedRows } from './_advanced_table_pinned_row
 export { default as AdvancedTableScrollbarNone} from './_advanced_table_scrollbar_none.jsx'
 export { default as AdvancedTableRowStyling } from './_advanced_table_row_styling.jsx'
 export { default as AdvancedTableColumnStyling } from './_advanced_table_column_styling.jsx'
+export { default as AdvancedTableColumnStylingWidth } from './_advanced_table_column_styling_width.jsx'
 export { default as AdvancedTableColumnStylingColumnHeaders } from './_advanced_table_column_styling_column_headers.jsx'
 export { default as AdvancedTableInfiniteScroll} from './_advanced_table_infinite_scroll.jsx'
 export {default as AdvancedTableWithCustomHeader} from './_advanced_table_with_custom_header.jsx'

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

@@ -162,7 +162,7 @@ const Card = (props: CardPropTypes): React.ReactElement => {
           {
             dragHandle ? (
               <Flex>
-                <span className="card_draggable_handle">
+                <span className="card_draggable_handle pb_draggable_handle">
                   <Icon
                       icon="grip-dots-vertical"
                       paddingRight="xs"

data/app/pb_kits/playbook/pb_card/card.html.erb

@@ -4,7 +4,7 @@
             <% if object.draggable_item %>
                 <%= pb_rails("flex", props: { align: "center" }) do %>
                     <% if object.drag_handle %>
-                        <span classname="card_draggable_handle">
+                        <span class="card_draggable_handle pb_draggable_handle">
                             <%= pb_rails("icon", props: { icon: "grip-dots-vertical", padding_right: "xs" }) %>
                         </span>
                     <% end %>

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

@@ -59,12 +59,13 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     commaSeparator = false,
   } = props
 
+  const isAmountEmpty = (value: string | number): boolean => (
+    value === '' || value == null || (typeof value === 'string' && value.trim() === '')
+  )
+
   // 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
@@ -81,7 +82,9 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     variantClass = '_bold'
   }
 
-  const [whole, decimal = '00'] = currencyAmount.split('.')
+  const [wholePart, decimalPart = '00'] = currencyAmount ? currencyAmount.split('.') : ['', '00']
+  const decimal = (decimalPart || '00').padEnd(2, '0').slice(0, 2)
+  const whole = currencyAmount === '' ? '' : (wholePart === '' ? '0' : wholePart)
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
@@ -135,7 +138,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
       <Caption dark={dark}>{label}</Caption>
       <div className={`pb_currency_wrapper${variantClass || emphasizedClass}`}>
         {unstyled ? (
-          nullDisplay && !amount ? (
+          nullDisplay && isAmountEmpty(amount) ? (
             <div>{nullDisplay}</div>
           ) : (
             <>
@@ -148,7 +151,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
             </>
           )
         ) : (
-          nullDisplay && !amount ? (
+          nullDisplay && isAmountEmpty(amount) ? (
             <Title
                 className="pb_currency_value"
                 dark={dark}

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

@@ -68,7 +68,7 @@ module Playbook
       end
 
       def title_text
-        if null_display
+        if null_display && amount.blank?
           null_display
         elsif swap_negative
           absolute_amount(abbr_or_format_amount)
@@ -125,14 +125,7 @@ module Playbook
       # 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?
-          ""
+          Kernel.format("%.2f", input)
         else
           input.to_s
         end
@@ -142,6 +135,7 @@ module Playbook
         return "" if currency_amount.blank?
 
         value = currency_amount.split(".").first
+        value = "0" if value.blank?
         if comma_separator
           number_with_delimiter(value.gsub(",", ""))
         else
@@ -152,7 +146,8 @@ module Playbook
       def decimal_value
         return "00" if currency_amount.blank?
 
-        currency_amount.split(".")[1] || "00"
+        fraction = currency_amount.split(".")[1] || "00"
+        fraction.ljust(2, "0")[0, 2]
       end
 
       def units_element

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

@@ -178,5 +178,48 @@ test('handles numeric amounts correctly', () => {
   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')
+  expect(screen.getByTestId('test-numeric-null')).toHaveTextContent('$0.00')
+})
+
+test('renders zero values with leading digit', () => {
+  render(
+    <>
+      <Currency
+          amount="0"
+          data={{ testid: 'test-string-zero' }}
+      />
+      <Currency
+          amount={0}
+          data={{ testid: 'test-numeric-zero' }}
+      />
+    </>
+  )
+
+  expect(screen.getByTestId('test-string-zero')).toHaveTextContent('$0.00')
+  expect(screen.getByTestId('test-numeric-zero')).toHaveTextContent('$0.00')
+})
+
+test('normalizes string zero with single decimal digit to .00', () => {
+  render(
+    <Currency
+        amount="0.0"
+        commaSeparator
+        data={{ testid: 'test-string-zero-single-decimal' }}
+    />
+  )
+
+  expect(screen.getByTestId('test-string-zero-single-decimal')).toHaveTextContent('$0.00')
+})
+
+test('nullDisplay only applies when amount is empty', () => {
+  render(
+    <Currency
+        amount="-.53"
+        data={{ testid: 'test-null-display-negative' }}
+        nullDisplay="$0.00"
+    />
+  )
+
+  expect(screen.getByTestId('test-null-display-negative')).toHaveTextContent('-$')
+  expect(screen.getByTestId('test-null-display-negative')).not.toHaveTextContent('$0.00')
 })

data/app/pb_kits/playbook/pb_date/docs/_playground.json

@@ -1,5 +1,5 @@
 {
-  "template": "<Date{{props}} />",
+  "template": "<FormattedDate{{props}} />",
   "propTargets": {},
   "defaults": {
     "alignment": "left",
@@ -11,7 +11,7 @@
   },
   "groups": [
     {
-      "name": "Content",
+      "name": "Date Config",
       "props": [
         "value",
         "showDayOfWeek",
@@ -32,21 +32,20 @@
     {
       "name": "Default",
       "props": {
-        "value": "2026-04-09T15:30:00.000Z"
+        "value": "2026-04-09"
       }
     },
     {
-      "name": "Large & centered",
+      "name": "centered",
       "props": {
-        "value": "2026-04-09T15:30:00.000Z",
-        "size": "lg",
+        "value": "2026-04-09",
         "alignment": "center"
       }
     },
     {
       "name": "Small with weekday",
       "props": {
-        "value": "2026-06-18T10:00:00.000Z",
+        "value": "2026-06-18",
         "size": "sm",
         "showDayOfWeek": true
       }
@@ -54,20 +53,17 @@
     {
       "name": "With icon & year",
       "props": {
-        "value": "2024-11-02T09:00:00.000Z",
+        "value": "2024-11-02",
         "showIcon": true,
         "showCurrentYear": true
       }
-    },
-    {
-      "name": "Unstyled",
-      "props": {
-        "value": "2026-04-09T15:30:00.000Z",
-        "unstyled": true,
-        "showDayOfWeek": true
-      }
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "default": {
+      "message": "Use as FormattedDate to avoid naming collisions with global Date object",
+      "type": "info"
+    }
+  }
 }

data/app/pb_kits/playbook/pb_date/docs/_playground.overrides.json

@@ -1,7 +1,8 @@
 {
+  "template": "<FormattedDate{{props}} />",
   "groups": [
     {
-      "name": "Content",
+      "name": "Date Config",
       "props": ["value", "showDayOfWeek", "showCurrentYear", "showIcon"]
     },
     {
@@ -13,21 +14,20 @@
     {
       "name": "Default",
       "props": {
-        "value": "2026-04-09T15:30:00.000Z"
+        "value": "2026-04-09"
       }
     },
     {
-      "name": "Large & centered",
+      "name": "centered",
       "props": {
-        "value": "2026-04-09T15:30:00.000Z",
-        "size": "lg",
+        "value": "2026-04-09",
         "alignment": "center"
       }
     },
     {
       "name": "Small with weekday",
       "props": {
-        "value": "2026-06-18T10:00:00.000Z",
+        "value": "2026-06-18",
         "size": "sm",
         "showDayOfWeek": true
       }
@@ -35,20 +35,17 @@
     {
       "name": "With icon & year",
       "props": {
-        "value": "2024-11-02T09:00:00.000Z",
+        "value": "2024-11-02",
         "showIcon": true,
         "showCurrentYear": true
       }
-    },
-    {
-      "name": "Unstyled",
-      "props": {
-        "value": "2026-04-09T15:30:00.000Z",
-        "unstyled": true,
-        "showDayOfWeek": true
-      }
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "default": {
+      "message": "Use as FormattedDate to avoid naming collisions with global Date object",
+      "type": "info"
+    }
+  }
 }

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -180,6 +180,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     //@ts-ignore
     globalProps(filteredProps),
     error ? 'error' : null,
+    inLine && 'inline-date-picker',
     className
   )
 
@@ -262,7 +263,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
               }
             </div>
 
-            {!hideIcon &&
+            {!hideIcon && !inLine &&
               <div
                   className={iconWrapperClass()}
                   id={`cal-icon-${pickerId}`}
@@ -274,7 +275,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
               </div>
             }
 
-            {hideIcon && inLine ?
+            {inLine ?
               <div>
                 <div
                     className={`${iconWrapperClass()} date-picker-inline-icon-plus`}

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -39,7 +39,7 @@
       <input type="hidden" id="<%= "#{object.end_date_id}" %>" name="<%= "#{object.end_date_name}" %>">
     <% end %>
 
-    <% if !object.hide_icon %>
+    <% if !object.hide_icon && !object.inline %>
       <div
           class="<%= object.icon_wrapper_class %>"
           id="cal-icon-<%= object.picker_id %>"
@@ -52,7 +52,7 @@
     <% end %>
 
     <!-- Inline -->
-    <% if object.hide_icon && object.inline %>
+    <% if object.inline %>
       <!-- Plus Icon -->
       <div
           class="<%= object.icon_wrapper_class %> date-picker-inline-icon-plus"
@@ -79,42 +79,57 @@
 
   <%= javascript_tag do %>
     (function() {
+      const initQuickPickChangeListener = (input) => {
+        if (!<%= object.selection_type == "quickpick" %>) return
+        if (input.dataset.quickpickInitialized) return
+
+        input.dataset.quickpickInitialized = "true"
+        input.addEventListener("change", ({ target }) => {
+          const startDate = document.getElementById("<%= object.start_date_id %>")
+          const endDate = document.getElementById("<%= object.end_date_id %>")
+          const splittedValue = target.value.split(" to ")
+          startDate.value = splittedValue[0]
+          endDate.value = splittedValue[1] ? splittedValue[1] : splittedValue[0]
+        })
+      }
+
       const loadDatePicker = () => {
-        const input = document.getElementById("<%= object.picker_id %>");
-        if (input && !input._flatpickr) {
-          datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
+        const input = document.getElementById("<%= object.picker_id %>")
+
+        if (!input || input._flatpickr) return true
+        if (typeof window.datePickerHelper !== "function") return false
 
-          if (<%= object.selection_type == "quickpick" %>) {
-            document.getElementById("<%= object.picker_id %>").addEventListener("change", ({ target }) => {
-              const startDate = document.getElementById("<%= object.start_date_id %>")
-              const endDate = document.getElementById("<%= object.end_date_id %>")
-              const splittedValue = target.value.split(" to ")
-              startDate.value = splittedValue[0]
-              endDate.value = splittedValue[1] ? splittedValue[1] : splittedValue[0]
-            })
-          }
+        window.datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
+        initQuickPickChangeListener(input)
+
+        return true
+      }
+
+      let attempts = 0
+      const retryLoad = () => {
+        if (loadDatePicker()) return
+
+        if (attempts++ < 20) {
+          setTimeout(retryLoad, 100)
         }
       }
 
-      // Try to initialize immediately if DOM is ready
       if (document.readyState === "loading") {
-        window.addEventListener("DOMContentLoaded", loadDatePicker)
+        window.addEventListener("DOMContentLoaded", retryLoad)
       } else {
-        loadDatePicker()
+        retryLoad()
       }
 
       // For dynamically added content (modals, etc.), check again after a brief delay
       setTimeout(() => {
-        const input = document.getElementById("<%= object.picker_id %>");
+        const input = document.getElementById("<%= object.picker_id %>")
         if (input && !input._flatpickr) {
-          loadDatePicker();
+          retryLoad()
         }
-      }, 100);
+      }, 100)
 
       if (<%= !object.custom_event_type.empty? %>) {
-        window.addEventListener("<%= object.custom_event_type %>", () => {
-          loadDatePicker()
-        })
+        window.addEventListener("<%= object.custom_event_type %>", retryLoad)
       }
     })()
   <% end %>

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

@@ -92,7 +92,8 @@ module Playbook
 
       def classname
         default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"
-        generate_classname("pb_date_picker_kit") + default_margin_bottom
+        inline_class = inline ? " inline-date-picker" : ""
+        generate_classname("pb_date_picker_kit") + default_margin_bottom + inline_class
       end
 
       def date_picker_config

data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js

@@ -40,6 +40,37 @@ describe('DatePicker Kit', () => {
     expect(kit).toHaveClass('pb_date_picker_kit mb_sm')
   })
 
+  test('inLine alone adds inline-date-picker class and inline control icons, not the calendar icon', () => {
+    const testId = 'datepicker-inline-only'
+    render(
+      <DatePicker
+          data={{ testid: testId }}
+          inLine
+          pickerId="date-picker-inline-only"
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass('inline-date-picker')
+    expect(kit.querySelector('#cal-icon-date-picker-inline-only')).not.toBeInTheDocument()
+    expect(kit.querySelector('#date-picker-inline-only-icon-plus')).toBeInTheDocument()
+    expect(kit.querySelector('#date-picker-inline-only-angle-down')).toBeInTheDocument()
+  })
+
+  test('hideIcon without inLine does not render inline control icons', () => {
+    const testId = 'datepicker-hide-icon-only'
+    render(
+      <DatePicker
+          data={{ testid: testId }}
+          hideIcon
+          pickerId="date-picker-hide-icon-only"
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    expect(kit.querySelector('#date-picker-hide-icon-only-icon-plus')).not.toBeInTheDocument()
+  })
+
   test('shows DatePicker date format m/d/Y', async () => {
     const testId = 'datepicker-date'
     render(

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

@@ -36,10 +36,10 @@ const DatePickerDialogSubmission = () => {
                 <Dialog.Body>
                     <DatePicker
                         defaultDate={dateFixed || undefined}
-                        key={`fixed-${pickerInstance}`}
+                        key={"fixed-" + pickerInstance}
                         label="Date"
                         onChange={(dateStr) => setDateFixed(dateStr || "")}
-                        pickerId={`datePickerFixed-${pickerInstance}`}
+                        pickerId={"datePickerFixed-" + pickerInstance}
                         staticPosition={false}
                     />
                 </Dialog.Body>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_inline.html.erb

@@ -1,6 +1,4 @@
 <%= pb_rails("date_picker", props: {
-  classname: "inline-date-picker",
-  hide_icon: true,
   inline: true,
   picker_id: "date-picker-inline"
 }) %>

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

@@ -6,8 +6,6 @@ const DatePickerInline = (props) => {
   return (
     <div>
       <DatePicker
-          className="inline-date-picker"
-          hideIcon
           inLine
           pickerId="date-picker-inline"
           {...props}