playbook_ui_docs 16.9.0 → 16.10.0.pre.rc.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3b47a60b6352013ae941fa4b004514f8a2dbd4af1163439c13eabb044d801e2d
-  data.tar.gz: d02cc9c36346a25bb9d385eceaf0ec8177ab4e2552f107cb09bee4e26e34e722
+  metadata.gz: 4267f7b437b78af8734c0b08b776a4d8c14c8676bb558bc73ed30890c305d3cc
+  data.tar.gz: c565734d3238c9f404ebcff2fa4b159b03aef1b97089c613aa607df543421b28
 SHA512:
-  metadata.gz: 29ae1d462f3aa0c003646385654b36fd3b222189d7b4b9a8ae102fb51ecbc395f4a8c7a1cb0aecf056df26f87fd813b9030a655d2f96fd89c809ca37dd1cc581
-  data.tar.gz: d15531bd15d5aeb41bd89454ef41da3e55d0b1aaf15d07ab8960f74c04ded768bc394bb0a9ae01715a7a5b325dae77e8d09e93aff13b2ed0039e531a2d24f246
+  metadata.gz: b0ef9f525463816195a2f3e5ed4ff7d9b684341829979557a99664ee1879fcb65d1da6166003da9758ca64232004a9173c5beb86510e7e09eda31168498d4387
+  data.tar.gz: 72079f297c3b342c8a5b34137f6b65a0cb8ff2a82452ccc433664415ca5d83ee93f4d75c59436ff037c85be3da8907c572c0f459345cce8602759c213f597f71

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/_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/_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/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_form/docs/_form_with_required_indicator.html.erb

@@ -131,23 +131,24 @@
 %>
 
 <%= pb_form_with(scope: :example, url: "", method: :get, validate: true) do |form| %>
-  <%= form.typeahead :example_typeahead_field, props: { label: true, required: true, required_indicator: true } %>
-  <%= form.text_field :example_text_field, props: { label: true, required: true, required_indicator: true } %>
-  <%= form.text_field :example_text_field_2, props: { label: "Text Field Custom Label", required: true, required_indicator: true } %>
-  <%= form.phone_number_field :example_phone_number_field, props: { label: true, required: true, required_indicator: true } %>
-  <%= form.email_field :example_email_field, props: { label: true, required: true, required_indicator: true } %>
-  <%= form.number_field :example_number_field, props: { label: true, required: true, required_indicator: true } %>
-  <%= form.search_field :example_search_field, props: { label: true, required: true, required_indicator: true } %>
-  <%= form.password_field :example_password_field, props: { label: true, required: true, required_indicator: true } %>
-  <%= form.url_field :example_url_field, props: { label: true, required: true, required_indicator: true } %>
-  <%= form.text_area :example_text_area, props: { label: true, required: true, required_indicator: true } %>
-  <%= form.text_area :example_text_area_2, props: { label: "Textarea Custom Label", required: true, required_indicator: true } %>
-  <%# form.check_box :example_checkbox, props: { label: true, text: "Checkbox Label", required: true, required_indicator: true } %>
-  <%= form.time_picker :example_time_picker_required_indicator, props: { label: true, required: true, required_indicator: true } %>
-  <%= form.date_picker :example_date_picker_required_indicator, props: { label: true, required: true, required_indicator: true } %>
-  <%= form.date_picker :example_date_picker_required_indicator_custom, props: { label: "Custom Date Picker Label", required: true, required_indicator: true } %>
+  <%= form.typeahead :example_typeahead_required_indicator, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.text_field :example_text_field_required_indicator, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.text_field :example_text_field_required_indicator_custom, props: { label: "Text Field Custom Label", required: true, required_indicator: true } %>
+  <%= form.phone_number_field :example_phone_number_field_required_indicator, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.email_field :example_email_field_required_indicator, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.number_field :example_number_field_required_indicator, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.search_field :example_search_field_required_indicator, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.password_field :example_password_field_required_indicator, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.url_field :example_url_field_required_indicator, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.text_area :example_text_area_required_indicator, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.text_area :example_text_area_required_indicator_custom, props: { label: "Textarea Custom Label", required: true, required_indicator: true } %>
+  <%= form.dropdown_field :example_dropdown_required_indicator, props: { label: true, options: example_dropdown_options, required: true, required_indicator: true } %>
+  <%= form.dropdown_field :example_dropdown_required_indicator_multi, props: { label: "Dropdown Custom Label", options: example_dropdown_options, multi_select: true, required: true, required_indicator: true } %>
   <%= form.select :example_select_required_indicator, [["Yes", 1], ["No", 2]], props: { label: true, required: true, required_indicator: true } %>
-  <%= form.select :example_select_required_indicator_2, [["Yes", 1], ["No", 2]], props: { label: "Example Select Field", required: true, required_indicator: true } %>
+  <%= form.select :example_select_required_indicator_custom, [["Yes", 1], ["No", 2]], props: { label: "Example Select Field", required: true, required_indicator: true } %>
+  <%# form.check_box :example_checkbox_required_indicator, props: { label: true, text: "Checkbox Label", required: true, required_indicator: true } %>
+  <%= form.date_picker :example_date_picker_required_indicator, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.date_picker :example_date_picker_required_indicator_custom, props: { label: "Date Picker Custom Label", required: true, required_indicator: true } %>
   <%= form.multi_level_select :example_multi_level_select_required_indicator, props: {
     label: true,
     margin_y: 'sm',
@@ -156,14 +157,14 @@
     tree_data: tree_data
   } %>
   <%= form.multi_level_select :example_multi_level_select_required_indicator_custom, props: {
-    label: "Custom Multi Level Select Label",
+    label: "Multi Level Select Custom Label",
     margin_y: 'sm',
     required: true,
     required_indicator: true,
     tree_data: tree_data
   } %>
-  <%= form.dropdown_field :example_dropdown, props: { label: true, options: example_dropdown_options, required: true, required_indicator: true } %>
-  <%= form.dropdown_field :example_dropdown_2, props: { label: "Dropdown Custom Label", options: example_dropdown_options, required: true, required_indicator: true } %>
+  <%= form.time_picker :example_time_picker_required_indicator, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.time_picker :example_time_picker_required_indicator_custom, props: { label: "Time Picker Custom Label", required: true, required_indicator: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

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'

data/app/pb_kits/playbook/pb_popover/docs/_popover_list.jsx

@@ -19,18 +19,16 @@ const PopoverWithButton = (props) => {
         onClick={handleTogglePopover}
         variant="secondary"
     >
-      <Flex align="center">
+      <Flex 
+          align="center"
+          gap="xxs" 
+      >
         {"Filter By"}
-        <Flex
-            className={showPopover ? "fa-flip-vertical" : ""}
-            display="inline_flex"
-        >
-          <Icon
-              fixedWidth
-              icon="angle-down"
-              margin-left="xxs"
-          />
-        </Flex>
+        <Icon
+            fixedWidth
+            flip={showPopover ? "vertical" : "none"}
+            icon="angle-down"
+        />
       </Flex>
     </Button>
   )

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.9.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-04 00:00:00.000000000 Z
+date: 2026-06-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -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,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
@@ -1507,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