playbook_ui_docs 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

data/app/pb_kits/playbook/pb_filter/docs/_filter_interactive_react.jsx

@@ -0,0 +1,153 @@
+import React, { useState } from "react";
+
+import Filter from "../_filter";
+
+import Button from "../../pb_button/_button";
+import DatePicker from "../../pb_date_picker/_date_picker";
+import Dropdown from "../../pb_dropdown/_dropdown";
+import Flex from "../../pb_flex/_flex";
+import Select from "../../pb_select/_select";
+
+const territorySelectOptions = [
+  { value: "USA" },
+  { value: "Canada" },
+  { value: "Brazil" },
+  { value: "Philippines" },
+];
+
+const statusDropdownOptions = [
+  { id: "open", label: "Open", value: "open" },
+  { id: "in_progress", label: "In progress", value: "in_progress" },
+  { id: "resolved", label: "Resolved", value: "resolved" },
+  { id: "closed", label: "Closed", value: "closed" },
+];
+
+const INITIAL_FILTERS = {
+  territory: "USA",
+  status: "open",
+  dateRange: "quickpick-this-week",
+  startDate: "05/01/2026",
+};
+
+const statusOptionForValue = (value) =>
+  value
+    ? statusDropdownOptions.find((opt) => opt.value === value)
+    : undefined;
+
+const FilterInteractive = (props) => {
+  const [filters, setFilters] = useState(INITIAL_FILTERS);
+
+  const updateFilter = (key) => (value) =>
+    setFilters((prev) => ({ ...prev, [key]: value }));
+
+  const handleClear = () => {
+    setFilters(INITIAL_FILTERS);
+  };
+
+  return (
+    <Filter
+        {...props}
+        filters={{
+          Territory: filters.territory,
+          Status: filters.status,
+          "Date range": filters.dateRange,
+          "Start date": filters.startDate,
+        }}
+        interactiveFilters={{
+          Territory: {
+            type: "select",
+            options: territorySelectOptions,
+            value: filters.territory,
+            onChange: updateFilter("territory"),
+          },
+          Status: {
+            type: "dropdown",
+            options: statusDropdownOptions,
+            value: filters.status,
+            onChange: updateFilter("status"),
+          },
+          "Date range": {
+            type: "dropdown",
+            variant: "quickpick",
+            value: filters.dateRange,
+            onChange: updateFilter("dateRange"),
+          },
+          "Start date": {
+            type: "date-picker",
+            value: filters.startDate,
+            onChange: updateFilter("startDate"),
+            format: "m/d/Y",
+          },
+        }}
+        minWidth="360px"
+        results={546}
+        sortOptions={{
+          popularity: "Popularity",
+        }}
+        sortValue={[{ name: "popularity", dir: "desc" }]}
+    >
+      {({ closePopover }) => (
+        <form>
+          <Select
+              {...props}
+              label="Territory"
+              name="location"
+              onChange={(e) => updateFilter("territory")(e.target.value)}
+              options={territorySelectOptions}
+              value={filters.territory}
+          />
+          <Dropdown
+              {...props}
+              blankSelection="Select status..."
+              defaultValue={statusOptionForValue(filters.status)}
+              key={filters.status || "cleared"}
+              label="Status"
+              marginBottom="sm"
+              onSelect={(option) =>
+                updateFilter("status")(option ? option.value : "")
+              }
+              options={statusDropdownOptions}
+          />
+
+          <Dropdown
+              {...props}
+              key={filters.dateRange || "cleared"}
+              label="Date range"
+              marginBottom="sm"
+              onSelect={(option) =>
+                updateFilter("dateRange")(option ? option.id : "")
+              }
+              variant="quickpick"
+          />
+
+          <DatePicker
+              {...props}
+              inputValue={filters.startDate}
+              label="Start date"
+              onChange={updateFilter("startDate")}
+              pickerId="filter-panel-start-date"
+          />
+
+          <Flex
+              {...props}
+              spacing="between"
+          >
+            <Button
+                {...props}
+                onClick={closePopover}
+                text="Apply"
+            />
+            <Button
+                {...props}
+                onClick={handleClear}
+                text="Clear"
+                variant="secondary"
+            />
+          </Flex>
+        </form>
+      )}
+    </Filter>
+  );
+};
+
+export default FilterInteractive;

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

@@ -0,0 +1,10 @@
+Click an applied filter chip to edit it inline. `interactiveFilters` supports:
+
+- `type: 'select'` / `'dropdown'`: pick from a list of options.
+- `type: 'date-picker'`: inline calendar. Supports `format`, `minDate`, `maxDate`, and `mode`.
+
+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`.
+
+Keep `filters`, `interactiveFilters.value`, and the filter popover fields backed by the same state so chip labels and form controls stay in sync.
+
+On Rails, pass `interactive_filters` with `target_input` so chip picks update the linked form control. Re-read submitted params in your view after Apply so `filters` reflects the new values.

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

@@ -32,7 +32,7 @@
     <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
 
     <%= form.actions do |action| %>
-      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
+      <%= action.submit props: { text: "Apply", data: { disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe },}%>
       <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
     <% end %>
   <% end %>

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

@@ -1,13 +1,316 @@
 {
   "template": "<Filter{{props}} />",
   "propTargets": {},
-  "defaults": {},
+  "defaults": {
+    "background": true,
+    "placement": "bottom-start",
+    "double": false,
+    "filters": {
+      "Full Name": "John Wick",
+      "City": "San Francisco"
+    },
+    "isCollapsed": false,
+    "minWidth": "360px",
+    "onCollapse": "() => {}",
+    "onSortChange": "() => {}",
+    "popoverProps": {},
+    "results": 546,
+    "sortOptions": {
+      "popularity": "Popularity",
+      "manager_title": "Manager's Title",
+      "manager_name": "Manager's Name"
+    },
+    "sortValue": [
+      {
+        "name": "popularity",
+        "dir": "desc"
+      }
+    ]
+  },
+  "groups": [
+    {
+      "name": "Layout",
+      "props": [
+        "double",
+        "variant",
+        "background",
+        "results"
+      ]
+    },
+    {
+      "name": "Filter State",
+      "props": [
+        "filters"
+      ]
+    },
+    {
+      "name": "Sorting",
+      "props": [
+        "sortOptions",
+        "sortValue",
+        "onSortChange"
+      ]
+    },
+    {
+      "name": "Popover",
+      "props": [
+        "placement",
+        "minWidth",
+        "maxHeight",
+        "popoverProps"
+      ]
+    },
+    {
+      "name": "Sidebar",
+      "props": []
+    }
+  ],
   "presets": [
     {
-      "name": "Default",
-      "props": {}
+      "name": "Single Filter",
+      "structureMode": "single",
+      "props": {
+        "filters": {
+          "Full Name": "John Wick"
+        },
+        "minWidth": "360px",
+        "onSortChange": "() => {}",
+        "results": 546,
+        "sortOptions": {
+          "popularity": "Popularity",
+          "manager_title": "Manager's Title",
+          "manager_name": "Manager's Name"
+        },
+        "sortValue": [
+          {
+            "name": "popularity",
+            "dir": "desc"
+          }
+        ]
+      }
+    },
+    {
+      "name": "Double Filter",
+      "structureMode": "double",
+      "props": {
+        "filters": {
+          "Full Name": "John Wick",
+          "City": "San Francisco"
+        },
+        "minWidth": "375px",
+        "onSortChange": "() => {}",
+        "results": 1,
+        "sortOptions": {
+          "popularity": "Popularity",
+          "manager_title": "Manager's Title",
+          "manager_name": "Manager's Name"
+        },
+        "sortValue": [
+          {
+            "name": "popularity",
+            "dir": "desc"
+          }
+        ]
+      }
+    },
+    {
+      "name": "No Background",
+      "structureMode": "single",
+      "props": {
+        "background": false,
+        "filters": {
+          "Full Name": "John Wick",
+          "City": "Las Vegas"
+        },
+        "minWidth": "360px",
+        "onSortChange": "() => {}",
+        "results": 3,
+        "sortOptions": {
+          "popularity": "Popularity",
+          "manager_title": "Manager's Title",
+          "manager_name": "Manager's Name"
+        },
+        "sortValue": [
+          {
+            "name": "popularity",
+            "dir": "desc"
+          }
+        ]
+      }
+    },
+    {
+      "name": "Filter Only",
+      "structureMode": "single",
+      "props": {
+        "filters": {
+          "Full Name": "John Wick"
+        },
+        "minWidth": "360px"
+      }
+    },
+    {
+      "name": "Sort Only",
+      "structureMode": "sort_only",
+      "props": {
+        "onSortChange": "() => {}",
+        "sortOptions": {
+          "popularity": "Popularity",
+          "manager_title": "Manager's Title",
+          "manager_name": "Manager's Name"
+        },
+        "sortValue": [
+          {
+            "name": "popularity",
+            "dir": "desc"
+          }
+        ]
+      }
+    },
+    {
+      "name": "Constrained Popover",
+      "structureMode": "double",
+      "props": {
+        "filters": {
+          "Full Name": "John Wick",
+          "City": "San Francisco"
+        },
+        "maxHeight": "360px",
+        "minWidth": "360px",
+        "onSortChange": "() => {}",
+        "results": 1,
+        "sortOptions": {
+          "popularity": "Popularity",
+          "manager_title": "Manager's Title",
+          "manager_name": "Manager's Name"
+        },
+        "sortValue": [
+          {
+            "name": "popularity",
+            "dir": "desc"
+          }
+        ]
+      }
+    },
+    {
+      "name": "Sidebar",
+      "structureMode": "sidebar",
+      "props": {
+        "onCollapse": "() => {}",
+        "results": 15,
+        "variant": "sidebar",
+        "width": "xs"
+      }
+    }
+  ],
+  "conditionals": {
+    "isCollapsed": {
+      "structureMode": "sidebar"
+    },
+    "onCollapse": {
+      "structureMode": "sidebar"
+    },
+    "maxHeight": {
+      "requires": "minWidth"
+    }
+  },
+  "hints": {
+    "single_filter": {
+      "presetName": "Single Filter",
+      "message": "Single Filter shows the compact layout with the filter trigger, active filters, result count, and sort menu in one row.",
+      "type": "info"
+    },
+    "double_filter": {
+      "presetName": "Double Filter",
+      "message": "Double Filter splits filter controls from the result count and sort controls, using a lower row for summary and sorting.",
+      "type": "info"
+    },
+    "no_background": {
+      "presetName": "No Background",
+      "message": "No Background renders the same filter controls without the Card wrapper.",
+      "type": "info"
+    },
+    "filter_only": {
+      "presetName": "Filter Only",
+      "message": "Filter Only keeps the filter trigger and selected filter display while omitting results and sorting props.",
+      "type": "info"
+    },
+    "sort_only": {
+      "presetName": "Sort Only",
+      "message": "Sort-only mode omits filter children and only renders the sort trigger.",
+      "type": "info"
+    },
+    "constrained_popover": {
+      "presetName": "Constrained Popover",
+      "message": "Constrained Popover demonstrates maxHeight and minWidth limits for larger filter forms inside the popover.",
+      "type": "info"
+    },
+    "sidebar": {
+      "presetName": "Sidebar",
+      "message": "Sidebar mode uses Filter.Section subcomponents and wrapper-managed collapse state so Expand All and Collapse All control every section.",
+      "type": "info"
+    }
+  },
+  "structureModes": {
+    "default": "single",
+    "modes": {
+      "single": {
+        "label": "Single",
+        "template": "<Filter{{props}}>\n  {{children}}\n</Filter>",
+        "children": "{({ closePopover }) => (\n    <form>\n      <TextInput\n          label=\"Full Name\"\n          placeholder=\"Enter name\"\n      />\n      <Select\n          blankSelection=\"Select One...\"\n          label=\"Territory\"\n          name=\"location\"\n          options={[\n            { value: 'USA' },\n            { value: 'Canada' },\n            { value: 'Brazil' },\n            { value: 'Philippines' },\n          ]}\n      />\n      <Flex spacing=\"between\">\n        <Button\n            onClick={closePopover}\n            text=\"Apply\"\n        />\n        <Button\n            text=\"Clear\"\n            variant=\"secondary\"\n        />\n      </Flex>\n    </form>\n  )}",
+        "props": {
+          "double": false,
+          "variant": ""
+        }
+      },
+      "double": {
+        "label": "Double",
+        "template": "<Filter{{props}}>\n  {{children}}\n</Filter>",
+        "children": "{({ closePopover }) => (\n    <form>\n      <TextInput\n          label=\"Full Name\"\n          placeholder=\"Enter name\"\n      />\n      <Select\n          blankSelection=\"Select One...\"\n          label=\"Territory\"\n          name=\"location\"\n          options={[\n            { value: 'USA' },\n            { value: 'Canada' },\n            { value: 'Brazil' },\n            { value: 'Philippines' },\n          ]}\n      />\n      <Flex spacing=\"between\">\n        <Button\n            onClick={closePopover}\n            text=\"Apply\"\n        />\n        <Button\n            text=\"Clear\"\n            variant=\"secondary\"\n        />\n      </Flex>\n    </form>\n  )}",
+        "props": {
+          "double": true,
+          "variant": ""
+        }
+      },
+      "sort_only": {
+        "label": "Sort Only",
+        "template": "<Filter{{props}} />",
+        "children": "",
+        "props": {
+          "double": false,
+          "filters": {},
+          "results": null,
+          "variant": ""
+        }
+      },
+      "sidebar": {
+        "label": "Sidebar",
+        "template": "<Filter\n    isCollapsed={isCollapsed}\n    onCollapse={toggleCollapse}{{props}}\n>\n  <Filter.Section headerText=\"Full Name\">\n    <TextInput placeholder=\"Enter name\" />\n  </Filter.Section>\n  <SectionSeparator />\n  <Filter.Section\n      collapsed={isCollapsed}\n      collapsible\n      headerText=\"Territory\"\n  >\n    <Select\n        blankSelection=\"Select One...\"\n        name=\"location\"\n        options={[\n          { value: 'USA' },\n          { value: 'Canada' },\n          { value: 'Brazil' },\n          { value: 'Philippines' },\n        ]}\n    />\n  </Filter.Section>\n  <SectionSeparator />\n  <Filter.Section\n      collapsed={isCollapsed}\n      collapsible\n      headerText=\"Products\"\n  >\n    <Checkbox text=\"Doors\" marginBottom=\"sm\" />\n    <Checkbox text=\"Windows\" marginBottom=\"sm\" />\n    <Checkbox text=\"Siding\" />\n  </Filter.Section>\n</Filter>",
+        "children": "",
+        "imports": [
+          "useCollapsible"
+        ],
+        "props": {
+          "double": false,
+          "variant": "sidebar",
+          "width": "xs"
+        },
+        "wrapper": "const FilterSidebarExample = () => {\n  const [isCollapsed, toggleCollapse] = useCollapsible(true)\n\n  return {{component}}\n}\n\n<FilterSidebarExample />"
+      }
     }
+  },
+  "children": {
+    "editable": false,
+    "default": ""
+  },
+  "hiddenProps": [
+    "isCollapsed",
+    "onCollapse"
   ],
-  "conditionals": {},
-  "hints": {}
+  "requiredCodeProps": [
+    "filters",
+    "results",
+    "sortOptions",
+    "sortValue",
+    "onSortChange"
+  ]
 }