playbook_ui 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

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

@@ -1,4 +1,15 @@
 {
+  "template": "<TextInput{{props}} value={textInputValue} onChange={({ target }) => setTextInputValue(target.value)} />",
+  "wrapper": "const TextInputPlayground = () => {\n  const [textInputValue, setTextInputValue] = useState(value)\n\n  return {{component}}\n}\n\n<TextInputPlayground />",
+  "statefulProps": ["value"],
+  "externalImports": ["import React, { useState } from 'react'"],
+  "defaults": {
+    "addOn": {
+      "icon": "user",
+      "alignment": "left",
+      "border": true
+    }
+  },
   "groups": [
     {
       "name": "Content",
@@ -6,11 +17,11 @@
     },
     {
       "name": "State",
-      "props": ["disabled", "error", "required", "requiredIndicator"]
+      "props": ["disabled", "error", "required", "requiredIndicator", "onChange"]
     },
     {
       "name": "Appearance",
-      "props": ["inline", "type", "mask", "emojiMask", "autoComplete"]
+      "props": ["inline", "type", "mask", "emojiMask", "autoComplete", "addOn"]
     }
   ],
   "presets": [
@@ -58,5 +69,30 @@
   "conditionals": {
     "requiredIndicator": { "requires": "label" }
   },
-  "hints": {}
+  "hints": {
+    "controlled_state": {
+      "message": "TextInput is controlled when value is set, so the snippet uses useState and onChange to keep the field editable.",
+      "type": "info"
+    },
+    "default": {
+      "presetName": "Default",
+      "message": "Default shows the common labeled input setup with name, placeholder, and state-backed value.",
+      "type": "info"
+    },
+    "with_error": {
+      "presetName": "With Error",
+      "message": "With Error displays validation copy below the field while preserving the entered value.",
+      "type": "info"
+    },
+    "disabled": {
+      "presetName": "Disabled",
+      "message": "Disabled keeps the label and placeholder visible while preventing edits.",
+      "type": "info"
+    },
+    "required": {
+      "presetName": "Required",
+      "message": "Required combines required with requiredIndicator so the label communicates the requirement.",
+      "type": "info"
+    }
+  }
 }

data/app/pb_kits/playbook/pb_text_input/kit.schema.json

@@ -73,7 +73,7 @@
       "default": null
     },
     "onChange": {
-      "type": "ReactNode",
+      "type": "function",
       "platforms": [
         "react"
       ]
@@ -139,13 +139,13 @@
       "platforms": [
         "rails"
       ],
-      "type": "string"
+      "type": "GenericObject"
     },
     "validation": {
       "platforms": [
         "rails"
       ],
-      "type": "string"
+      "type": "GenericObject"
     }
   },
   "globalProps": true,

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

@@ -25,7 +25,8 @@
         "disabled",
         "error",
         "required",
-        "requiredIndicator"
+        "requiredIndicator",
+        "onChange"
       ]
     },
     {
@@ -34,7 +35,17 @@
         "inline",
         "resize",
         "rows",
-        "emojiMask"
+        "emojiMask",
+        "maxCharacters",
+        "characterCount"
+      ]
+    },
+    {
+      "name": "Options",
+      "props": [
+        "inputOptions",
+        "object",
+        "method"
       ]
     }
   ],
@@ -85,5 +96,26 @@
       "requires": "label"
     }
   },
-  "hints": {}
+  "hints": {
+    "default": {
+      "presetName": "Default",
+      "message": "Default shows a labeled multiline field with name, placeholder, and value.",
+      "type": "info"
+    },
+    "with_error": {
+      "presetName": "With Error",
+      "message": "With Error displays validation copy below the textarea while preserving the entered text.",
+      "type": "info"
+    },
+    "disabled": {
+      "presetName": "Disabled",
+      "message": "Disabled keeps existing text visible while preventing edits.",
+      "type": "info"
+    },
+    "required": {
+      "presetName": "Required",
+      "message": "Required combines required with requiredIndicator so the label communicates the requirement.",
+      "type": "info"
+    }
+  }
 }

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

@@ -6,11 +6,15 @@
     },
     {
       "name": "State",
-      "props": ["disabled", "error", "required", "requiredIndicator"]
+      "props": ["disabled", "error", "required", "requiredIndicator", "onChange"]
     },
     {
       "name": "Appearance",
-      "props": ["inline", "resize", "rows", "emojiMask"]
+      "props": ["inline", "resize", "rows", "emojiMask", "maxCharacters", "characterCount"]
+    },
+    {
+      "name":"Options",
+      "props": ["inputOptions", "object", "method"]
     }
   ],
   "presets": [
@@ -58,5 +62,26 @@
   "conditionals": {
     "requiredIndicator": { "requires": "label" }
   },
-  "hints": {}
+  "hints": {
+    "default": {
+      "presetName": "Default",
+      "message": "Default shows a labeled multiline field with name, placeholder, and value.",
+      "type": "info"
+    },
+    "with_error": {
+      "presetName": "With Error",
+      "message": "With Error displays validation copy below the textarea while preserving the entered text.",
+      "type": "info"
+    },
+    "disabled": {
+      "presetName": "Disabled",
+      "message": "Disabled keeps existing text visible while preventing edits.",
+      "type": "info"
+    },
+    "required": {
+      "presetName": "Required",
+      "message": "Required combines required with requiredIndicator so the label communicates the requirement.",
+      "type": "info"
+    }
+  }
 }

data/app/pb_kits/playbook/pb_textarea/kit.schema.json

@@ -138,7 +138,7 @@
       "default": "none"
     },
     "onChange": {
-      "type": "ReactNode",
+      "type": "function",
       "platforms": [
         "react"
       ]

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

@@ -14,16 +14,17 @@
       "props": [
         "date",
         "showTimezone",
-        "timeZone",
-        "showIcon"
+        "timeZone"
       ]
     },
     {
       "name": "Appearance",
       "props": [
+        "showIcon",
         "size",
         "align",
-        "unstyled"
+        "unstyled",
+        "dark"
       ]
     }
   ],
@@ -35,15 +36,7 @@
       }
     },
     {
-      "name": "Medium & centered",
-      "props": {
-        "date": "2026-04-09T15:30:00.000Z",
-        "size": "md",
-        "align": "center"
-      }
-    },
-    {
-      "name": "With clock icon",
+      "name": "With Icon",
       "props": {
         "date": "2026-04-09T09:15:00.000Z",
         "showIcon": true,
@@ -58,7 +51,7 @@
       }
     },
     {
-      "name": "Pacific time",
+      "name": "Pacific Time",
       "props": {
         "date": "2026-04-09T15:30:00.000Z",
         "timeZone": "America/Los_Angeles"
@@ -70,5 +63,26 @@
       "requires": "showTimezone"
     }
   },
-  "hints": {}
+  "hints": {
+    "default": {
+      "presetName": "Default",
+      "message": "Default renders a Date value with the kit's standard small time styling.",
+      "type": "info"
+    },
+    "with_icon": {
+      "presetName": "With Icon",
+      "message": "With Icon adds the clock icon and medium sizing for a more prominent timestamp.",
+      "type": "info"
+    },
+    "hide_timezone": {
+      "presetName": "Hide timezone label",
+      "message": "Hide timezone label passes showTimezone={false} while keeping the same time value.",
+      "type": "info"
+    },
+    "pacific_time": {
+      "presetName": "Pacific Time",
+      "message": "Pacific Time uses timeZone to render the same Date in a specific timezone.",
+      "type": "info"
+    }
+  }
 }

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

@@ -2,11 +2,11 @@
   "groups": [
     {
       "name": "Content",
-      "props": ["date", "showTimezone", "timeZone", "showIcon"]
+      "props": ["date", "showTimezone", "timeZone"]
     },
     {
       "name": "Appearance",
-      "props": ["size", "align", "unstyled"]
+      "props": ["showIcon", "size", "align", "unstyled", "dark"]
     }
   ],
   "presets": [
@@ -17,15 +17,7 @@
       }
     },
     {
-      "name": "Medium & centered",
-      "props": {
-        "date": "2026-04-09T15:30:00.000Z",
-        "size": "md",
-        "align": "center"
-      }
-    },
-    {
-      "name": "With clock icon",
+      "name": "With Icon",
       "props": {
         "date": "2026-04-09T09:15:00.000Z",
         "showIcon": true,
@@ -40,7 +32,7 @@
       }
     },
     {
-      "name": "Pacific time",
+      "name": "Pacific Time",
       "props": {
         "date": "2026-04-09T15:30:00.000Z",
         "timeZone": "America/Los_Angeles"
@@ -50,5 +42,26 @@
   "conditionals": {
     "timeZone": { "requires": "showTimezone" }
   },
-  "hints": {}
+  "hints": {
+    "default": {
+      "presetName": "Default",
+      "message": "Default renders a Date value with the kit's standard small time styling.",
+      "type": "info"
+    },
+    "with_icon": {
+      "presetName": "With Icon",
+      "message": "With Icon adds the clock icon and medium sizing for a more prominent timestamp.",
+      "type": "info"
+    },
+    "hide_timezone": {
+      "presetName": "Hide timezone label",
+      "message": "Hide timezone label passes showTimezone={false} while keeping the same time value.",
+      "type": "info"
+    },
+    "pacific_time": {
+      "presetName": "Pacific Time",
+      "message": "Pacific Time uses timeZone to render the same Date in a specific timezone.",
+      "type": "info"
+    }
+  }
 }

data/app/pb_kits/playbook/pb_time_picker/_time_picker.scss

@@ -478,3 +478,45 @@
     }
   }
 }
+
+.pb_time_picker_panel_portal,
+.pb_time_picker_floating_shell {
+  margin: 0;
+  padding: 0;
+  pointer-events: auto;
+  overflow: visible;
+
+  .pb_time_picker_container {
+    overflow: visible;
+    pointer-events: auto;
+    width: 314.2px;
+    min-width: 314.2px;
+
+    &.pb_time_picker_container_24hour {
+      width: 170.4px;
+      min-width: 170.4px;
+    }
+  }
+
+  .pb_time_selection {
+    max-height: none;
+    overflow: visible;
+    flex-wrap: nowrap;
+  }
+
+  .time_dropdown {
+    pointer-events: auto;
+  }
+}
+
+// Rails dialog / filter portal: shell is positioned via JS; keep it out of flex layout.
+.pb_time_picker_floating_shell {
+  pointer-events: none;
+
+  .pb_time_picker_container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    margin-top: 0;
+  }
+}