playbook_ui_docs 16.10.0.pre.rc.0 → 16.10.0.pre.rc.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c82d4adfa4d9cbd6550580ab6dfd58119365c4efecd5399419d6f6e9eeb5e822
-  data.tar.gz: 199e229ddfc52a82ff613aa97c7c8cd076f0195e0f7a37e33c3471ab05cdd651
+  metadata.gz: 4267f7b437b78af8734c0b08b776a4d8c14c8676bb558bc73ed30890c305d3cc
+  data.tar.gz: c565734d3238c9f404ebcff2fa4b159b03aef1b97089c613aa607df543421b28
 SHA512:
-  metadata.gz: d8c416f86e1125bee7ff540957a058d8461ddb7e7670fcc7c74cfc0c320714015065aa8fb056425ba3861efa0901d987f767542a5b61b7d534d096a584609253
-  data.tar.gz: 0a3c47dd180de40f4911e921554d914b90a77700cf3b6abc3a94b8c3d4cd5855a2ae610c476887b33dbd9646bb59e24410b902e26e64ed22120296a351e723f7
+  metadata.gz: b0ef9f525463816195a2f3e5ed4ff7d9b684341829979557a99664ee1879fcb65d1da6166003da9758ca64232004a9173c5beb86510e7e09eda31168498d4387
+  data.tar.gz: 72079f297c3b342c8a5b34137f6b65a0cb8ff2a82452ccc433664415ca5d83ee93f4d75c59436ff037c85be3da8907c572c0f459345cce8602759c213f597f71

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.

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/example.yml

@@ -12,6 +12,7 @@ examples:
   - filter_placement: Filter Placement
   - filter_popover_props: Popover Props
   - filter_within_turbo_frames: Within Turbo Frames
+  - filter_interactive: Interactive Applied Filters
 
   react:
   - filter_default: Default
@@ -25,4 +26,5 @@ examples:
   - filter_placement: Filter Placement
   - filter_popover_props: Popover Props
   - filter_sidebar: Sidebar
+  - filter_interactive_react: Interactive Applied Filters
 

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

@@ -8,4 +8,5 @@ export { default as FilterMaxWidth } from './_filter_max_width.jsx'
 export { default as FilterMaxHeight } from './_filter_max_height.jsx'
 export { default as FilterPlacement } from './_filter_placement.jsx'
 export { default as FilterPopoverProps } from './_filter_popover_props.jsx'
-export { default as FilterSidebar } from './_filter_sidebar.jsx'
+export { default as FilterSidebar } from './_filter_sidebar.jsx'
+export { default as FilterInteractiveReact } from './_filter_interactive_react.jsx'

data/app/pb_kits/playbook/pb_icon/docs/_icon_default.jsx

@@ -5,7 +5,7 @@ const IconDefault = (props) => {
   return (
     <div>
       <Icon
-          fixedWidth
+          fixedWidth 
           icon="user"
           {...props}
       />

data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_color.html.erb

@@ -0,0 +1,21 @@
+<%= pb_rails("loading_inline", props: { text: " Light" }) %>
+
+<br/>
+
+<%= pb_rails("loading_inline", props: { color: "default", text: " Default" }) %>
+
+<br/>
+
+<%= pb_rails("loading_inline", props: { color: "lighter", text: " Lighter" }) %>
+
+<br/>
+
+<%= pb_rails("loading_inline", props: { color: "link", text: " Link" }) %>
+
+<br/>
+
+<%= pb_rails("loading_inline", props: { color: "error", text: " Error" }) %>
+
+<br/>
+
+<%= pb_rails("loading_inline", props: { color: "success", text: " Success" }) %>

data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_color.jsx

@@ -0,0 +1,55 @@
+import React from 'react'
+import LoadingInline from '../_loading_inline'
+
+const LoadingInlineColor = (props) => (
+    <div>
+        <LoadingInline 
+            text=" Light" 
+            {...props} 
+        />
+        
+            <br/>
+
+        <LoadingInline 
+            color="default"
+            text=" Default" 
+            {...props} 
+        />
+
+
+
+        <br/>
+
+        <LoadingInline 
+            color="lighter"
+            text=" Lighter" 
+            {...props} 
+        />
+
+        <br/>
+
+        <LoadingInline 
+            color="link"
+            text=" Link" 
+            {...props} 
+        />
+
+        <br/>
+
+        <LoadingInline 
+            color="error"
+            text=" Error" 
+            {...props} 
+        />
+
+        <br/>
+
+        <LoadingInline 
+            color="success"
+            text=" Success" 
+            {...props} 
+        />
+    </div>
+)
+
+export default LoadingInlineColor

data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_color.md

@@ -0,0 +1 @@
+The Loading Inline kit will use `light` color by default. Other available colors are: `default` `lighter` `success` `error` `link`.

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

@@ -4,6 +4,7 @@ examples:
   - loading_inline_default: Default
   - loading_inline_custom: Custom Text
   - loading_inline_variant: Variant
+  - loading_inline_color: Color
 
   
   
@@ -11,3 +12,4 @@ examples:
   - loading_inline_default: Default
   - loading_inline_custom: Custom Text
   - loading_inline_variant: Variant
+  - loading_inline_color: Color

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

@@ -1,3 +1,4 @@
 export { default as LoadingInlineDefault } from './_loading_inline_default.jsx'
 export { default as LoadingInlineCustom } from './_loading_inline_custom.jsx'
 export { default as LoadingInlineVariant } from './_loading_inline_variant.jsx'
+export { default as LoadingInlineColor } from './_loading_inline_color.jsx'

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 16.10.0.pre.rc.0
+  version: 16.10.0.pre.rc.1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-06-09 00:00:00.000000000 Z
+date: 2026-06-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -1093,6 +1093,10 @@ files:
 - app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb
 - app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx
 - app/pb_kits/playbook/pb_filter/docs/_filter_default.md
+- app/pb_kits/playbook/pb_filter/docs/_filter_interactive.html.erb
+- app/pb_kits/playbook/pb_filter/docs/_filter_interactive.md
+- app/pb_kits/playbook/pb_filter/docs/_filter_interactive_react.jsx
+- app/pb_kits/playbook/pb_filter/docs/_filter_interactive_react.md
 - app/pb_kits/playbook/pb_filter/docs/_filter_max_height.html.erb
 - app/pb_kits/playbook/pb_filter/docs/_filter_max_height.jsx
 - app/pb_kits/playbook/pb_filter/docs/_filter_max_width.html.erb
@@ -1510,6 +1514,9 @@ files:
 - app/pb_kits/playbook/pb_list/docs/example.yml
 - app/pb_kits/playbook/pb_list/docs/index.js
 - app/pb_kits/playbook/pb_loading_inline/docs/_description.md
+- app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_color.html.erb
+- app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_color.jsx
+- app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_color.md
 - app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_custom.html.erb
 - app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_custom.jsx
 - app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_default.html.erb