playbook_ui_docs 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

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

@@ -4,23 +4,39 @@
     "modes": {
       "simple": {
         "label": "Simple",
-        "template": "<Dropdown{{props}} />",
+        "template": "<Dropdown options={options}{{props}} />",
         "children": ""
       },
       "subcomponents": {
         "label": "With Subcomponents",
-        "template": "<Dropdown{{props}}>\n  <Dropdown.Trigger />\n  <Dropdown.Container>\n    <Dropdown.Option option={({ label: 'United States', value: 'unitedStates', id: 'us' })} />\n    <Dropdown.Option option={({ label: 'Canada', value: 'canada', id: 'ca' })} />\n    <Dropdown.Option option={({ label: 'Pakistan', value: 'pakistan', id: 'pk' })} />\n  </Dropdown.Container>\n</Dropdown>",
-        "children": "",
-        "props": {
-          "options": [
-            { "label": "United States", "value": "unitedStates", "id": "us" },
-            { "label": "Canada", "value": "canada", "id": "ca" },
-            { "label": "Pakistan", "value": "pakistan", "id": "pk" }
-          ]
-        }
+        "template": "<Dropdown options={options}{{props}}>\n  <Dropdown.Trigger />\n  <Dropdown.Container>\n    {options.map((option) => (\n      <Dropdown.Option key={option.id} option={option} />\n    ))}\n  </Dropdown.Container>\n</Dropdown>",
+        "children": ""
       }
     }
   },
+  "customProps": {
+    "options": {
+      "type": "array",
+      "platforms": ["react", "rails"],
+      "description": "Dropdown option data with label, value, id, and optional disabled state."
+    }
+  },
+  "requiredProps": {
+    "options": [
+      { "label": "United States", "value": "unitedStates", "id": "us" },
+      { "label": "Canada", "value": "canada", "id": "ca", "disabled": true },
+      { "label": "Pakistan", "value": "pakistan", "id": "pk" },
+      { "label": "Mexico", "value": "mexico", "id": "mx", "disabled": true },
+      { "label": "United Kingdom", "value": "unitedKingdom", "id": "gb" },
+      { "label": "India", "value": "india", "id": "in" },
+      { "label": "Australia", "value": "australia", "id": "au" },
+      { "label": "New Zealand", "value": "newZealand", "id": "nz" },
+      { "label": "Italy", "value": "italy", "id": "it" },
+      { "label": "Germany", "value": "germany", "id": "de" },
+      { "label": "Brazil", "value": "brazil", "id": "br" },
+      { "label": "Philippines", "value": "philippines", "id": "ph" }
+    ]
+  },
   "defaults": {
     "autocomplete": false,
     "blankSelection": "",
@@ -32,8 +48,17 @@
     "multiSelect": false,
     "options": [
       { "label": "United States", "value": "unitedStates", "id": "us" },
-      { "label": "Canada", "value": "canada", "id": "ca" },
-      { "label": "Pakistan", "value": "pakistan", "id": "pk" }
+      { "label": "Canada", "value": "canada", "id": "ca", "disabled": true },
+      { "label": "Pakistan", "value": "pakistan", "id": "pk" },
+      { "label": "Mexico", "value": "mexico", "id": "mx", "disabled": true },
+      { "label": "United Kingdom", "value": "unitedKingdom", "id": "gb" },
+      { "label": "India", "value": "india", "id": "in" },
+      { "label": "Australia", "value": "australia", "id": "au" },
+      { "label": "New Zealand", "value": "newZealand", "id": "nz" },
+      { "label": "Italy", "value": "italy", "id": "it" },
+      { "label": "Germany", "value": "germany", "id": "de" },
+      { "label": "Brazil", "value": "brazil", "id": "br" },
+      { "label": "Philippines", "value": "philippines", "id": "ph" }
     ],
     "placeholder": "Select a country",
     "requiredIndicator": false,
@@ -80,7 +105,8 @@
         "separators",
         "formPillProps",
         "activeStyle",
-        "dark"
+        "dark",
+        "disabled"
       ]
     },
     {
@@ -93,36 +119,28 @@
       "name": "Default trigger",
       "props": {
         "variant": "default",
-        "placeholder": "Select a country",
-        "options": [
-          { "label": "United States", "value": "unitedStates", "id": "us" },
-          { "label": "Canada", "value": "canada", "id": "ca" },
-          { "label": "Mexico", "value": "mexico", "id": "mx" }
-        ]
+        "placeholder": "Select a country"
       }
     },
     {
       "name": "With label",
       "props": {
         "label": "Select a Country",
-        "placeholder": "Choose a country",
-        "options": [
-          { "label": "United States", "value": "unitedStates", "id": "us" },
-          { "label": "Canada", "value": "canada", "id": "ca" },
-          { "label": "Pakistan", "value": "pakistan", "id": "pk" }
-        ]
+        "placeholder": "Choose a country"
+      }
+    },
+    {
+      "name": "Disabled options",
+      "props": {
+        "label": "Select a Country",
+        "placeholder": "Choose a country"
       }
     },
     {
       "name": "Subtle Variant",
       "props": {
         "variant": "subtle",
-        "separators": false,
-        "options": [
-          { "label": "Alpha", "value": "alpha", "id": "a" },
-          { "label": "Beta", "value": "beta", "id": "b" },
-          { "label": "Gamma", "value": "gamma", "id": "g" }
-        ]
+        "separators": false
       }
     },
     {
@@ -183,13 +201,7 @@
       "props": {
         "variant": "default",
         "multiSelect": true,
-        "placeholder": "Select regions",
-        "options": [
-          { "label": "North", "value": "north", "id": "n" },
-          { "label": "South", "value": "south", "id": "s" },
-          { "label": "East", "value": "east", "id": "e" },
-          { "label": "West", "value": "west", "id": "w" }
-        ]
+        "placeholder": "Select countries"
       }
     },
     {
@@ -202,16 +214,6 @@
         "defaultValue": [
           { "label": "United States", "value": "unitedStates" },
           { "label": "Italy", "value": "italy" }
-        ],
-        "options": [
-          { "label": "United States", "value": "unitedStates", "id": "us" },
-          { "label": "United Kingdom", "value": "unitedKingdom", "id": "gb" },
-          { "label": "Canada", "value": "canada", "id": "ca" },
-          { "label": "Pakistan", "value": "pakistan", "id": "pk" },
-          { "label": "India", "value": "india", "id": "in" },
-          { "label": "Australia", "value": "australia", "id": "au" },
-          { "label": "New Zealand", "value": "newZealand", "id": "nz" },
-          { "label": "Italy", "value": "italy", "id": "it" }
         ]
       }
     },
@@ -221,11 +223,7 @@
         "variant": "default",
         "label": "Required field",
         "placeholder": "Required field",
-        "error": "Please make a selection.",
-        "options": [
-          { "label": "Option A", "value": "a", "id": "a" },
-          { "label": "Option B", "value": "b", "id": "b" }
-        ]
+        "error": "Please make a selection."
       }
     },
     {
@@ -233,33 +231,14 @@
       "props": {
         "variant": "default",
         "autocomplete": true,
-        "placeholder": "Search…",
-        "options": [
-          { "label": "Apple", "value": "apple", "id": "1" },
-          { "label": "Apricot", "value": "apricot", "id": "2" },
-          { "label": "Banana", "value": "banana", "id": "3" }
-        ]
+        "placeholder": "Search..."
       }
     },
     {
       "name": "Constrained height",
       "props": {
         "label": "Choose an Option",
-        "constrainHeight": true,
-        "options": [
-          { "label": "Option 1", "value": "option_1", "id": "opt_1" },
-          { "label": "Option 2", "value": "option_2", "id": "opt_2" },
-          { "label": "Option 3", "value": "option_3", "id": "opt_3" },
-          { "label": "Option 4", "value": "option_4", "id": "opt_4" },
-          { "label": "Option 5", "value": "option_5", "id": "opt_5" },
-          { "label": "Option 6", "value": "option_6", "id": "opt_6" },
-          { "label": "Option 7", "value": "option_7", "id": "opt_7" },
-          { "label": "Option 8", "value": "option_8", "id": "opt_8" },
-          { "label": "Option 9", "value": "option_9", "id": "opt_9" },
-          { "label": "Option 10", "value": "option_10", "id": "opt_10" },
-          { "label": "Option 11", "value": "option_11", "id": "opt_11" },
-          { "label": "Option 12", "value": "option_12", "id": "opt_12" }
-        ]
+        "constrainHeight": true
       }
     }
   ],
@@ -302,6 +281,11 @@
       "message": "constrainHeight restricts the height of the dropdown menu and enables vertical scrolling when the content exceeds this height. This prevents long dropdown lists from rendering off-screen.",
       "type": "info"
     },
+    "disabled_options_info": {
+      "presetName": "Disabled options",
+      "message": "Set disabled: true on individual option objects to keep them visible while preventing selection.",
+      "type": "info"
+    },
     "subcomponent_structure_info": {
       "message": "Switch Structure to “With Subcomponents” to see the explicit Dropdown.Trigger, Dropdown.Container, and Dropdown.Option composition API.",
       "type": "info"

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

@@ -6,12 +6,14 @@ examples:
   - dropdown_multi_select_with_autocomplete: Multi Select with Autocomplete
   - dropdown_multi_select_display_rails: Multi Select with Form Pill Props
   - dropdown_subtle_variant: Subtle Variant
+  - dropdown_disabled_option: Disabled Option
   - dropdown_subcomponent_structure_rails: Subcomponent Structure
   - dropdown_with_autocomplete_with_subcomponents: Autocomplete with Subcomponent Structure
   - dropdown_with_label: With Label
   - dropdown_with_custom_options_rails: Custom Options
   - dropdown_multi_select_with_custom_options: Multi Select with Custom Options
   - dropdown_with_custom_display_rails: Custom Display
+  - dropdown_custom_display_disabled_option: Custom Display Disabled Option
   - dropdown_with_custom_trigger_rails: Custom Trigger
   - dropdown_with_search_rails: Custom Trigger Dropdown with Search
   - dropdown_with_custom_padding: Custom Option Padding
@@ -33,6 +35,7 @@ examples:
   - dropdown_quickpick_with_date_pickers_rails: Quick Pick with Date Pickers
   - dropdown_quickpick_with_date_pickers_default_rails: Quick Pick with Date Pickers (Default Value)
   - dropdown_required_indicator: Required Indicator
+  - dropdown_disabled: Disabled Input
   - dropdown_custom_event_type: Custom Event Type
 
   react:
@@ -42,10 +45,12 @@ examples:
   - dropdown_multi_select_with_autocomplete: Multi Select with Autocomplete
   - dropdown_multi_select_display: Multi Select with Form Pill Props
   - dropdown_subtle_variant: Subtle Variant
+  - dropdown_disabled_option: Disabled Option
   - dropdown_subcomponent_structure: Subcomponent Structure
   - dropdown_with_autocomplete_with_subcomponents: Autocomplete with Subcomponent Structure
   - dropdown_with_label: With Label
   - dropdown_with_custom_options: Custom Options
+  - dropdown_custom_display_disabled_option: Custom Display Disabled Option
   - dropdown_multi_select_with_custom_options: Multi Select with Custom Options
   - dropdown_with_custom_display: Custom Display
   - dropdown_with_custom_trigger: Custom Trigger
@@ -71,3 +76,4 @@ examples:
   - dropdown_quickpick_custom: Quick Pick Variant (Custom Quick Pick Dates)
   - dropdown_quickpick_with_date_pickers: Quick Pick Variant with Date Pickers
   - dropdown_required_indicator: Required Indicator
+  - dropdown_disabled: Disabled Input

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

@@ -33,3 +33,6 @@ export { default as DropdownWithClearable } from './_dropdown_with_clearable.jsx
 export { default as DropdownWithConstrainHeight } from './_dropdown_with_constrain_height.jsx'
 export { default as DropdownClosingOptions } from './_dropdown_closing_options.jsx'
 export { default as DropdownRequiredIndicator } from "./_dropdown_required_indicator.jsx";
+export { default as DropdownDisabledOption } from "./_dropdown_disabled_option.jsx";
+export { default as DropdownCustomDisplayDisabledOption } from "./_dropdown_custom_display_disabled_option.jsx";
+export { default as DropdownDisabled } from "./_dropdown_disabled.jsx";

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_remove_replace.html.erb

@@ -0,0 +1,66 @@
+<div id="file-upload-remove-replace">
+  <%= pb_rails("list", props: { id: "selected-files-list", margin_bottom: "sm" }) %>
+
+  <%= pb_rails("file_upload", props: {
+    id: "remove_replace",
+    input_options: { multiple: true },
+  }) %>
+</div>
+
+<template id="file-list-item-template">
+  <%= pb_rails("list/item") do %>
+    <%= pb_rails("flex", props: { align: "center", justify: "between", width: "100%" }) do %>
+      <%= pb_rails("body", props: { data: { file_name: true } }) %>
+      <%= pb_rails("circle_icon_button", props: {
+        icon: "times",
+        variant: "secondary",
+        input_options: { classname: "remove-file-button" },
+      }) %>
+    <% end %>
+  <% end %>
+</template>
+
+<%= javascript_tag defer: "defer" do %>
+  document.addEventListener("DOMContentLoaded", function () {
+    const fileInput = document.getElementById("upload-remove_replace")
+    const list = document.getElementById("selected-files-list")
+    const template = document.getElementById("file-list-item-template")
+    let files = []
+
+    if (!fileInput || !list || !template) return
+
+    function syncInput() {
+      const dataTransfer = new DataTransfer()
+      files.forEach((file) => dataTransfer.items.add(file))
+      fileInput.files = dataTransfer.files
+    }
+
+    function render() {
+      list.innerHTML = ""
+
+      files.forEach((file, index) => {
+        const clone = template.content.cloneNode(true)
+        const nameElement = clone.querySelector("[data-file-name]")
+        const removeButton = clone.querySelector(".remove-file-button")
+
+        nameElement.textContent = file.name
+        removeButton.addEventListener("click", function (event) {
+          event.preventDefault()
+          event.stopPropagation()
+          files = files.filter((_, fileIndex) => fileIndex !== index)
+          syncInput()
+          render()
+        })
+
+        list.appendChild(clone)
+      })
+    }
+
+    fileInput.addEventListener("change", function () {
+      const newFiles = Array.from(fileInput.files)
+      files = [...files, ...newFiles]
+      syncInput()
+      render()
+    })
+  })
+<% end %>

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_remove_replace.jsx

@@ -0,0 +1,53 @@
+
+import React, { useState } from 'react'
+
+import Body from '../../pb_body/_body'
+import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
+import FileUpload from '../../pb_file_upload/_file_upload'
+import Flex from '../../pb_flex/_flex'
+import List from '../../pb_list/_list'
+import ListItem from '../../pb_list/_list_item'
+
+const FileUploadRemoveReplace = (props) => {
+  const [filesToUpload, setFilesToUpload] = useState([])
+
+  const handleOnFilesAccepted = (files) => {
+    setFilesToUpload([...filesToUpload, ...files])
+  }
+
+  const handleRemoveFile = (index) => {
+    setFilesToUpload(filesToUpload.filter((_, fileIndex) => fileIndex !== index))
+  }
+
+  return (
+    <div>
+      {filesToUpload.length > 0 && (
+        <List marginBottom="sm">
+          {filesToUpload.map((file, index) => (
+            <ListItem key={`${file.name}-${index}`}>
+              <Flex
+                  align="center"
+                  justify="between"
+                  width="100%"
+              >
+                <Body text={file.name} />
+                <CircleIconButton
+                    aria={{ label: `Remove ${file.name}` }}
+                    icon="times"
+                    onClick={() => handleRemoveFile(index)}
+                    variant="secondary"
+                />
+              </Flex>
+            </ListItem>
+          ))}
+        </List>
+      )}
+      <FileUpload
+          onFilesAccepted={handleOnFilesAccepted}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default FileUploadRemoveReplace

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_remove_replace.md

@@ -0,0 +1,5 @@
+The File Upload kit does not include built-in remove or replace behavior. Manage selected files in application state and compose the kit with other Playbook components.
+
+**Remove** — Track accepted files in state and filter out the file to remove. In React, pair `List` with `CircleIconButton`. In Rails, listen for `change` on the file input, keep files in a JavaScript array, and use `DataTransfer` to sync the input when a file is removed.
+
+**Replace** — Selecting a new file on the native Rails input replaces the current selection. For single-file React workflows, set state to the newly accepted files instead of appending: `setFilesToUpload(files)`.

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

@@ -2,7 +2,8 @@
   "template": "<FileUpload{{props}} />",
   "propTargets": {},
   "defaults": {
-    "accept": {}
+    "accept": {},
+    "dark": false
   },
   "groups": [
     {

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

@@ -4,6 +4,7 @@ examples:
   - file_upload_default: File Upload
   - file_upload_custom: Custom
   - file_upload_error: Error
+  - file_upload_remove_replace: Remove and Replace
 
   react:
   - file_upload_default: Default List of files to upload
@@ -11,4 +12,5 @@ examples:
   - file_upload_custom_message: Add a custom message
   - file_upload_custom_description: Add your one accepted files description
   - file_upload_max_size: Set a file size limit
-  - file_upload_error: Error
+  - file_upload_error: Error
+  - file_upload_remove_replace: Remove and Replace

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

@@ -4,3 +4,4 @@ export { default as FileUploadCustomMessage } from './_file_upload_custom_messag
 export { default as FileUploadCustomDescription } from './_file_upload_custom_description.jsx'
 export { default as FileUploadMaxSize } from './_file_upload_max_size.jsx'
 export { default as FileUploadError } from './_file_upload_error.jsx'
+export { default as FileUploadRemoveReplace } from './_file_upload_remove_replace.jsx'

data/app/pb_kits/playbook/pb_filter/docs/_filter_interactive.html.erb

@@ -0,0 +1,116 @@
+<%
+  territory_options = [
+    { value: "USA", label: "USA" },
+    { value: "Canada", label: "Canada" },
+    { value: "Brazil", label: "Brazil" },
+    { value: "Philippines", label: "Philippines" },
+  ]
+
+  status_options = [
+    { value: "open", label: "Open", id: "open" },
+    { value: "in_progress", label: "In progress", id: "in_progress" },
+    { value: "resolved", label: "Resolved", id: "resolved" },
+    { value: "closed", label: "Closed", id: "closed" },
+  ]
+
+  raw_example = params[:example]
+  example_params =
+    if raw_example.respond_to?(:permit)
+      raw_example.permit(:territory, :status, :date_range, :start_date)
+    else
+      raw_example || {}
+    end
+  current_territory = example_params[:territory].presence || "USA"
+  current_status    = example_params[:status].presence || "open"
+  current_date_range = example_params[:date_range].presence || "quickpick-this-week"
+  current_start     = example_params[:start_date].presence || "05/01/2026"
+  status_default    = status_options.find { |o| o[:value] == current_status }
+%>
+
+<%=
+  pb_rails("filter", props: {
+    id: "filter-interactive-demo",
+    min_width: "360px",
+    margin_bottom: "xl",
+    template: "default",
+    results: 546,
+    filters: [
+      { name: "Territory",  value: current_territory },
+      { name: "Status",     value: current_status },
+      { name: "Date range", value: current_date_range },
+      { name: "Start date", value: current_start },
+    ],
+    interactive_filters: [
+      {
+        name: "Territory",
+        type: "select",
+        options: territory_options,
+        target_input: "filter-interactive-territory",
+        auto_submit: true,
+      },
+      {
+        name: "Status",
+        type: "dropdown",
+        options: status_options,
+        target_input: "filter-interactive-status",
+        auto_submit: true,
+      },
+      {
+        name: "Date range",
+        type: "dropdown",
+        variant: "quickpick",
+        target_input: "filter-interactive-date-range",
+        auto_submit: true,
+      },
+      {
+        name: "Start date",
+        type: "date-picker",
+        target_input: "filter-interactive-start",
+        format: "m/d/Y",
+        auto_submit: true,
+      },
+    ],
+    sort_menu: [
+      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
+    ],
+  }) do
+%>
+  <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
+    <%= pb_rails("select", props: {
+      label: "Territory",
+      name: "territory",
+      options: territory_options.map { |o| { value: o[:value], text: o[:label] } },
+      value: current_territory,
+      input_options: { id: "filter-interactive-territory" }
+    }) %>
+
+    <%= pb_rails("dropdown", props: {
+      id: "filter-interactive-status",
+      label: "Status",
+      name: "status",
+      options: status_options,
+      default_value: status_default,
+      margin_bottom: "sm",
+    }) %>
+
+    <%= pb_rails("dropdown", props: {
+      id: "filter-interactive-date-range",
+      label: "Date range",
+      name: "date_range",
+      variant: "quickpick",
+      margin_bottom: "sm",
+    }) %>
+
+    <%= pb_rails("date_picker", props: {
+      label: "Start date",
+      name: "start_date",
+      picker_id: "filter-interactive-start",
+      default_date: current_start,
+    }) %>
+
+    <%= form.actions do |action| %>
+      <%= action.submit props: { text: "Apply" } %>
+      <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_filter/docs/_filter_interactive.md

@@ -0,0 +1,12 @@
+Click an applied filter chip to edit it inline. `interactive_filters` supports:
+
+- `type: 'select'` / `'dropdown'`: pick from a list of options.
+- `type: 'date-picker'`: inline calendar. Supports `format`, `min_date`, `max_date`, and `mode`.
+
+Each entry needs a `target_input` that points to the form control it updates. For `select` and `date-picker`, use the input's `id`. For `dropdown`, use the Dropdown kit's `id`.
+
+For date ranges, use `type: 'dropdown'` with `variant: 'quickpick'`. The Filter kit generates the same quickpick options as Dropdown, so no `options` are needed. Values are quickpick ids, such as `quickpick-this-week`.
+
+Chip edits update the linked control inside the filter popover. Click **Apply** to submit, then pass the submitted values back into `filters` so chips re-render with the latest labels.
+
+Optional `auto_submit: true` on a chip entry submits the form immediately when a chip value is picked.