playbook_ui 16.7.0 → 16.8.0.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b6e2aff174ff5639403b1af402319a9bae7900aa80c6e1f11f23e330309d5d5a
-  data.tar.gz: 524f88effff9cd94eb4624f5c13e828e764511e61ed784646537ff7e238a28cf
+  metadata.gz: bf26b3a5bc84db3c0723985d97147839159d420ec7ea3041a24ce948eb307702
+  data.tar.gz: 6aabd8a4a3b3d75c8fd5bdf423caefbfbee870867a44efd283cd5e5300a13ad0
 SHA512:
-  metadata.gz: 76e16078f40f3142228a9eae24d47f272c84bfd8ccf231eba35ef3861490405524757078d83cb3d44fd0c73d1c40be6aa10c8ff513f6069af5187ce1c18d50b1
-  data.tar.gz: ee5c545edfcfaee49b9fd319bff32a53c681c961a3292ef1bfc20ffab4d036621938c5f6c06115f7156bd63e993af9e02eb4ba9bddf4850fd69f91bc81b14b7e
+  metadata.gz: 183ca9c2fc15ecde3a04ccb900578161d4a6941c096fb7ccac1fd122f4bb9873058d510a56be5fa775504b0da702b3a65ea7f9c8f3f84b37ab5e9d0242f2a563
+  data.tar.gz: 5d44fe619ba3ab8ac29b60e45d0d365a13314c4928bf9de29128179cf6fc18ed747b1e91864c27bcb6223fd9d21d87a6a35f31345a202d98de5ff579da747ff0

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

@@ -12,6 +12,20 @@ import Caption from '../pb_caption/_caption'
 import Body from '../pb_body/_body'
 import colors from "../tokens/exports/_colors.module.scss"
 
+function serializeDefaultDateForFilterReset(defaultDate: unknown): string | undefined {
+  if (defaultDate === '' || defaultDate == null) return undefined
+  if (Array.isArray(defaultDate)) {
+    const parts = defaultDate.map((d) => {
+      if (d == null || d === '') return ''
+      if (d instanceof Date) return d.toISOString()
+      return String(d)
+    }).filter(Boolean)
+    return parts.length ? parts.join(',') : undefined
+  }
+  if (defaultDate instanceof Date) return defaultDate.toISOString()
+  return String(defaultDate)
+}
+
 type DatePickerProps = {
   allowInput?: boolean,
   aria?: { [key: string]: string },
@@ -113,7 +127,11 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
   } = props
 
   const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
+  const filterResetDefaultSerialized = serializeDefaultDateForFilterReset(defaultDate)
+  const dataProps = buildDataProps({
+    ...data,
+    ...(filterResetDefaultSerialized ? { 'default-value': filterResetDefaultSerialized } : {}),
+  })
   const htmlProps = buildHtmlProps(htmlOptions)
   const inputAriaProps = buildAriaProps(inputAria)
   const inputDataProps = buildDataProps(inputData)
@@ -180,6 +198,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     //@ts-ignore
     globalProps(filteredProps),
     error ? 'error' : null,
+    inLine && 'inline-date-picker',
     className
   )
 
@@ -262,7 +281,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
               }
             </div>
 
-            {!hideIcon &&
+            {!hideIcon && !inLine &&
               <div
                   className={iconWrapperClass()}
                   id={`cal-icon-${pickerId}`}
@@ -274,7 +293,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

@@ -1,8 +1,11 @@
-<%= pb_content_tag(:div,
-    class: object.classname + object.error_class,
-    'data-pb-date-picker' => true,
-    'data-validation-message' => object.validation_message,
-      ) do %>
+<% date_picker_root_attrs = {
+  class: object.classname + object.error_class,
+  'data-pb-date-picker' => true,
+  'data-validation-message' => object.validation_message,
+}
+  date_picker_root_attrs['data-default-value'] = object.serialized_default_date_for_dom if object.serialized_default_date_for_dom.present?
+%>
+<%= pb_content_tag(:div, date_picker_root_attrs) do %>
   <div class="input_wrapper">
     <% if !object.hide_label && object.label %>
       <label for="<%= object.picker_id %>">
@@ -39,7 +42,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 +55,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"

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
@@ -144,6 +145,18 @@ module Playbook
       def angle_down_path
         "app/pb_kits/playbook/utilities/icons/angle-down.svg"
       end
+
+      # Serialized business default for opt-in smart filter reset (Nitro / data-default-value).
+      def serialized_default_date_for_dom
+        case default_date
+        when nil, ""
+          nil
+        when Array
+          default_date.compact_blank.map(&:to_s).join(",")
+        else
+          default_date.to_s.presence
+        end
+      end
     end
   end
 end

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

@@ -40,6 +40,63 @@ describe('DatePicker Kit', () => {
     expect(kit).toHaveClass('pb_date_picker_kit mb_sm')
   })
 
+  test('exposes data-default-value on kit root when defaultDate is set', () => {
+    const testId = 'datepicker-def-attr'
+    render(
+      <DatePicker
+          data={{ testid: testId }}
+          defaultDate={DEFAULT_DATE}
+          pickerId="date-picker-def-attr"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveAttribute('data-default-value', DEFAULT_DATE.toISOString())
+  })
+
+  test('omits data-default-value when defaultDate is empty', () => {
+    const testId = 'datepicker-no-def-attr'
+    render(
+      <DatePicker
+          data={{ testid: testId }}
+          defaultDate=""
+          pickerId="date-picker-no-def-attr"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).not.toHaveAttribute('data-default-value')
+  })
+
+  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_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}

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

@@ -1,5 +1,5 @@
 {
-  "template": "<DatePicker{{props}} />",
+  "template": "<DatePicker {{props}} />",
   "propTargets": {},
   "defaults": {
     "allowInput": false,
@@ -19,11 +19,23 @@
     "controlsStartId": "",
     "controlsEndId": "",
     "syncStartWith": "",
-    "syncEndWith": ""
+    "syncEndWith": "",
+    "customQuickPickDates": {
+      "override": false,
+      "dates": []
+    },
+    "pickerId": "playground-date-picker",
+    "disableDate": [],
+    "disableRange": [],
+    "disableWeekdays": [],
+    "yearRange": [
+      1900,
+      2100
+    ]
   },
   "groups": [
     {
-      "name": "Content",
+      "name": "Date Picker Config",
       "props": [
         "label",
         "placeholder",
@@ -36,11 +48,18 @@
     {
       "name": "Appearance",
       "props": [
+        "dark",
         "hideIcon",
         "hideLabel",
-        "inLine",
-        "staticPosition",
-        "selectionType"
+        "inLine"
+      ]
+    },
+    {
+      "name": "Quick pick",
+      "props": [
+        "selectionType",
+        "customQuickPickDates",
+        "thisRangesEndToday"
       ]
     },
     {
@@ -69,20 +88,12 @@
     {
       "name": "Advanced",
       "props": [
-        "customQuickPickDates",
-        "positionElement",
-        "scrollContainer",
         "inputValue",
         "inputOnChange",
         "inputAria",
         "inputData",
         "type",
-        "timeFormat",
-        "thisRangesEndToday",
-        "controlsStartId",
-        "controlsEndId",
-        "syncStartWith",
-        "syncEndWith"
+        "timeFormat"
       ]
     }
   ],
@@ -93,20 +104,57 @@
         "name": "event_date",
         "pickerId": "playground-date-picker",
         "label": "Event date",
-        "placeholder": "Select date",
-        "defaultDate": "04/09/2026",
-        "format": "m/d/Y"
+        "placeholder": "Select date"
       }
     },
     {
-      "name": "Inline calendar",
+      "name": "Inline",
       "props": {
         "name": "inline_date",
         "pickerId": "playground-date-inline",
         "label": "Inline",
-        "defaultDate": "04/09/2026",
-        "inLine": true,
-        "staticPosition": true
+        "inLine": true
+      }
+    },
+    {
+      "name": "Quick pick",
+      "props": {
+        "name": "quickpick_range",
+        "pickerId": "playground-quickpick",
+        "label": "Date range",
+        "placeholder": "mm/dd/yyyy to mm/dd/yyyy",
+        "allowInput": true,
+        "selectionType": "quickpick"
+      }
+    },
+    {
+      "name": "Quick pick with Custom Dates",
+      "props": {
+        "name": "quickpick_range",
+        "pickerId": "playground-quickpick",
+        "label": "Date range",
+        "placeholder": "mm/dd/yyyy to mm/dd/yyyy",
+        "allowInput": true,
+        "selectionType": "quickpick",
+        "customQuickPickDates": {
+          "override": false,
+          "dates": [
+            {
+              "label": "Last 15 months",
+              "value": {
+                "timePeriod": "months",
+                "amount": 15
+              }
+            },
+            {
+              "label": "First week of June 2022",
+              "value": [
+                "06/01/2022",
+                "06/07/2022"
+              ]
+            }
+          ]
+        }
       }
     },
     {
@@ -115,7 +163,6 @@
         "name": "starts_at",
         "pickerId": "playground-datetime",
         "label": "Starts at",
-        "defaultDate": "04/09/2026",
         "enableTime": true,
         "format": "m/d/Y H:i"
       }
@@ -126,8 +173,7 @@
         "name": "typed_date",
         "pickerId": "playground-allow-input",
         "label": "Start date",
-        "allowInput": true,
-        "defaultDate": "04/09/2026"
+        "allowInput": true
       }
     },
     {
@@ -136,8 +182,25 @@
         "name": "month_only",
         "pickerId": "playground-month",
         "label": "Month",
-        "selectionType": "month",
-        "defaultDate": "04/01/2026"
+        "selectionType": "month"
+      }
+    },
+    {
+      "name": "Week picker",
+      "props": {
+        "name": "week_only",
+        "pickerId": "playground-week",
+        "label": "Week",
+        "selectionType": "week"
+      }
+    },
+    {
+      "name": "Dark",
+      "props": {
+        "name": "dark_picker",
+        "pickerId": "playground-dark",
+        "label": "Event date",
+        "dark": true
       }
     },
     {
@@ -146,7 +209,6 @@
         "name": "bounded",
         "pickerId": "playground-bounded",
         "label": "Within range",
-        "defaultDate": "04/09/2026",
         "minDate": "01/01/2026",
         "maxDate": "12/31/2026"
       }
@@ -157,22 +219,54 @@
         "name": "invalid_date",
         "pickerId": "playground-error",
         "label": "Due date",
-        "error": "Please choose a valid date",
-        "defaultDate": ""
+        "error": "Please choose a valid date"
+      }
+    }
+  ],
+  "conditionals": {
+    "customQuickPickDates": {
+      "requires": {
+        "selectionType": "quickpick"
       }
     },
-    {
-      "name": "Minimal chrome",
-      "props": {
-        "name": "compact_date",
-        "pickerId": "playground-minimal",
-        "label": "",
-        "hideLabel": true,
-        "hideIcon": true,
-        "defaultDate": "04/09/2026"
+    "thisRangesEndToday": {
+      "requires": {
+        "selectionType": "quickpick"
       }
     }
-  ],
-  "conditionals": {},
-  "hints": {}
+  },
+  "hints": {
+    "pickerId": {
+      "message": "The pickerId is used to identify the date picker in the DOM. It is required and must be unique.",
+      "type": "info"
+    },
+    "defaultDate": {
+      "when": {
+        "defaultDate": "04/09/2026"
+      },
+      "message": "The default date is the date that will be selected when the date picker is first rendered. It is required and must be a valid date.",
+      "type": "info"
+    },
+    "quickPick": {
+      "when": {
+        "selectionType": "quickpick"
+      },
+      "message": "Quick pick shows preset ranges (relative periods or explicit date pairs). Use thisRangesEndToday when the plugin should treat ranges as ending today.",
+      "type": "info"
+    },
+    "customQuickPickDates": {
+      "presetName": "Quick pick with Custom Dates",
+      "message": "Custom quick pick dates are used to override the default quick pick dates. It must be an object with a dates array.",
+      "type": "info"
+    }
+  },
+  "hiddenProps": [
+    "staticPosition",
+    "scrollContainer",
+    "controlsStartId",
+    "controlsEndId",
+    "syncStartWith",
+    "syncEndWith",
+    "positionElement"
+  ]
 }