playbook_ui_docs 16.9.0 → 16.10.0.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3b47a60b6352013ae941fa4b004514f8a2dbd4af1163439c13eabb044d801e2d
-  data.tar.gz: d02cc9c36346a25bb9d385eceaf0ec8177ab4e2552f107cb09bee4e26e34e722
+  metadata.gz: c82d4adfa4d9cbd6550580ab6dfd58119365c4efecd5399419d6f6e9eeb5e822
+  data.tar.gz: 199e229ddfc52a82ff613aa97c7c8cd076f0195e0f7a37e33c3471ab05cdd651
 SHA512:
-  metadata.gz: 29ae1d462f3aa0c003646385654b36fd3b222189d7b4b9a8ae102fb51ecbc395f4a8c7a1cb0aecf056df26f87fd813b9030a655d2f96fd89c809ca37dd1cc581
-  data.tar.gz: d15531bd15d5aeb41bd89454ef41da3e55d0b1aaf15d07ab8960f74c04ded768bc394bb0a9ae01715a7a5b325dae77e8d09e93aff13b2ed0039e531a2d24f246
+  metadata.gz: d8c416f86e1125bee7ff540957a058d8461ddb7e7670fcc7c74cfc0c320714015065aa8fb056425ba3861efa0901d987f767542a5b61b7d534d096a584609253
+  data.tar.gz: 0a3c47dd180de40f4911e921554d914b90a77700cf3b6abc3a94b8c3d4cd5855a2ae610c476887b33dbd9646bb59e24410b902e26e64ed22120296a351e723f7

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_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_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_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.0
 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-09 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