playbook_ui_docs 16.8.0.pre.alpha.play293416882 → 16.8.0.pre.alpha.play299216890

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 88bb96933aeae897ca05d1f2dcea378bbafc56f0853c8b61c78fe248cf1f5780
-  data.tar.gz: 54e7df297d62410b02904955e025629c92b280235c9aec60ebd73e6e8df64ea5
+  metadata.gz: 860db9f3755d911abe0dbbf5a3efa317aabff549cc33ab18696e49a3c275f713
+  data.tar.gz: 65d029647372cd161c84f763dd327dfee5f4fec16b4da44c5b5e1c6e27672fd5
 SHA512:
-  metadata.gz: b302b255fa520d82f62cc50d83ddcdaa090382cc5cb33ba0b8cd0a1b0761430e201338ec0596636ea217b29b33a802b831f1e9e8460e388178ec065e1f7eb76f
-  data.tar.gz: 4caa014dfcb186cb947b95942a5b23c79ceeceefce4b0e10442331c1fee19df5ca235dc6821b014209b53d44792bd93a4514766bc82003799745977817165685
+  metadata.gz: a0b94e4292ba942d55c30f1fdda6fe8f11d89d7a1f80ae6e9c4301b3b8aa6b2a067f2caddf91b3671da1fab487394c210b2fd70dace43ac057f79cbfeee82281
+  data.tar.gz: d45397a811bf0630f68b1b1d657db195b71f5d6119b39409aeac2a8c84f0b1ddcce7ee4476625c52d292964d454e3754e96aa31739ab726df7e0c04642472730

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_year_asc.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("date_picker", props: { picker_id: "date-picker-date-asc", year_ascending: true}) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_year_asc.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import DatePicker from '../_date_picker'
+
+const DatePickerYearAsc = (props) => (
+  <div>
+    <DatePicker
+        pickerId="date-picker-date-asc"
+        yearAscending
+        {...props}
+    />
+  </div>
+)
+
+export default DatePickerYearAsc

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_year_asc.md

@@ -0,0 +1 @@
+`yearAscending`/`year_ascending` is a boolean prop that if set to true, will render the years in the year dropdown in chronological order. This prop is set to false by default. 

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

@@ -16,6 +16,7 @@
     "showTimezone": false,
     "staticPosition": true,
     "thisRangesEndToday": false,
+    "yearAscending": false,
     "controlsStartId": "",
     "controlsEndId": "",
     "syncStartWith": "",

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

@@ -23,6 +23,7 @@ examples:
   - date_picker_flatpickr_methods: Flatpickr Methods
   - date_picker_hooks: Hooks
   - date_picker_year_range: Year Range
+  - date_picker_year_asc: Year Ascending
   - date_picker_anti_patterns: Anti-Patterns
   - date_picker_margin_bottom: Margin Bottom
   - date_picker_inline: Inline
@@ -58,6 +59,7 @@ examples:
   - date_picker_flatpickr_methods: Flatpickr Methods
   - date_picker_hooks: Hooks
   - date_picker_year_range: Year Range
+  - date_picker_year_asc: Year Ascending
   - date_picker_margin_bottom: Margin Bottom
   - date_picker_inline: Inline
   - date_picker_month_and_year: Month & Year Only

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

@@ -30,3 +30,4 @@ export { default as DatePickerRangePattern } from './_date_picker_range_pattern'
 export { default as DatePickerAndDropdownRange } from './_date_picker_and_dropdown_range.jsx'
 export { default as DatePickerRequiredIndicator } from "./_date_picker_required_indicator.jsx";
 export { default as DatePickerDialogSubmission } from "./_date_picker_dialog_submission.jsx";
+export { default as DatePickerYearAsc } from './_date_picker_year_asc.jsx'

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

@@ -12,7 +12,6 @@ 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
@@ -26,5 +25,4 @@ 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,5 +8,4 @@ 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 FilterInteractiveReact } from './_filter_interactive_react.jsx'
+export { default as FilterSidebar } from './_filter_sidebar.jsx'

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

@@ -1,7 +1,10 @@
 {
   "template": "<RichTextEditor{{props}} />",
   "propTargets": {},
-  "defaults": {},
+  "defaults": {
+    "requiredIndicator": false,
+    "simple": false
+  },
   "groups": [
     {
       "name": "Props",

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 16.8.0.pre.alpha.play293416882
+  version: 16.8.0.pre.alpha.play299216890
 platform: ruby
 authors:
 - Power UX
@@ -723,6 +723,9 @@ files:
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_week.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_week.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_week.md
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_year_asc.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_year_asc.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_year_asc.md
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_year_range.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_year_range.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_year_range.md
@@ -1090,10 +1093,6 @@ 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

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

@@ -1,116 +0,0 @@
-<%
-  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

@@ -1,12 +0,0 @@
-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

@@ -1,153 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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.