playbook_ui_docs 16.5.0.pre.alpha.AVNGR110715795 → 16.5.0.pre.alpha.PLAY2893datepickerlabelclicktoggle15576

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 27891122c87f6449aac020ab1af01b051fe47d3ac7a3d0f33eee3d265959b9c7
-  data.tar.gz: fb8e877c5c3872951f3fe17b2e431aaea3aa2de30d745753f4cbb1b8426fa080
+  metadata.gz: 2d60c2ba4f82d282d7852f35732e089f16535c728299a163cbe6518a7a617f56
+  data.tar.gz: a99eab01b457c02313dfdb725d53c1caf606f1d8f98b2bd083db81b9ff96ce14
 SHA512:
-  metadata.gz: dd490d7c4da313c2d2a5ae727976797b708e798a0d5b95a0c54709f91adc419d2bf12ed46067d05ec456646ff418910ffba595875c317c84e81b63ee28768214
-  data.tar.gz: 834147f24129d28d447d31c181cebc4e48bc2d980a9619feac1300083cacf7977f9a27276bd872b1051b8c5bb362cb8a4c750df0893c2cdaf060da607ef0e219
+  metadata.gz: 67020badde5cfd53a0cd98149ecdb17c36916996930f619141fff9d50c4e5aca171bb1ead458f62a96d7e1d47c2ea6ae85f919098a44fe5c4e55cc92657ed4a9
+  data.tar.gz: 264b9593b9e1c11ce394361f1b62eb12ac05c73a0e06bdb9b7e175958a642bc979b8d488c2cf8e094e5ba3cf4321996a3567d5267846bd9a0a9376faf8099e0d

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

@@ -66,4 +66,3 @@ examples:
   - date_picker_positions: Custom Positions
   - date_picker_positions_element: Custom Position (based on element)
   - date_picker_required_indicator: Required Indicator
-  - date_picker_dialog_submission: Dialog Form Submission

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

@@ -29,4 +29,3 @@ export { default as DatePickerQuickPickDefaultDate } from './_date_picker_quick_
 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";

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -97,8 +97,8 @@
 }] %>
 
 <%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
-  <%= form.typeahead :example_typeahead_validation, props: { data: { typeahead_example2: true, user: {} }, label: true, placeholder: "Search for a user", required: true } %>
-  <%= form.typeahead :example_typeahead_validation_react, props: { options: example_typeahead_options, pills: true, label: "Example Typeahead (React Rendered)", placeholder: "Search for a user", required: true } %>
+  <%= form.typeahead :example_typeahead_validation, props: { data: { typeahead_example2: true, user: {} }, label: true, placeholder: "Search for a user", required: true, validation: { message: "Please select a user." } } %>
+  <%= form.typeahead :example_typeahead_validation_react, props: { options: example_typeahead_options, pills: true, label: "Example Typeahead (React Rendered)", placeholder: "Search for a user", required: true, validation: { message: "Please select a color." } } %>
   <%= form.typeahead :example_typeahead_validation_react_2, props: { options: example_typeahead_options, pills: true, label: "Example Typeahead 2 (React Rendered)", placeholder: "Search for a user", required: true } %>
   <%= form.text_field :example_text_field_validation, props: { label: true, required: true } %>
   <%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field", hidden_inputs: true, required: true } %>
@@ -110,14 +110,14 @@
   <%= form.text_area :example_text_area_validation, props: { label: true, required: true } %>
   <%= form.dropdown_field :example_dropdown_validation, props: { label: true, options: example_dropdown_options, required: true } %>
   <%= form.dropdown_field :example_dropdown_validation_multi, props: { label: true, options: example_dropdown_options, multi_select: true, required: true } %>
-  <%= form.select :example_select_validation, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true } %>
+  <%= form.select :example_select_validation, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true, validation_message: "Please, select an option." } %>
   <%= form.collection_select :example_collection_select_validation, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= form.check_box :example_checkbox_validation, props: { text: "Example Checkbox Validation", label: true, required: true }, checked_value: "1", unchecked_value: "0" %>
-  <%= form.date_picker :example_date_picker_2, props: { label: true, required: true, allow_input: true } %>
+  <%= form.date_picker :example_date_picker_2, props: { label: true, required: true, validation_message: "Please, select a date.", allow_input: true } %>
   <%= form.star_rating_field :example_star_rating_validation, props: { variant: "interactive", label: true, required: true } %>
   <%= form.time_zone_select_field :example_time_zone_select, ActiveSupport::TimeZone.us_zones, { default: "Eastern Time (US & Canada)" }, props: { label: true, blank_selection: "Select a Time Zone...", required: true } %>
   <%= form.multi_level_select :example_multi_level_select, props: { id: "multi-level-select-form", tree_data: treeData, margin_bottom: "sm", required: true, label: "Example Multi Level Select field" } %>
-  <%= form.time_picker :example_time_picker_validation, props: { label: true, required: true } %>
+  <%= form.time_picker :example_time_picker_validation, props: { label: true, required: true, validation_message: "Please select a time." } %>
  
   <%= form.actions do |action| %>
     <%= action.submit %>

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

@@ -3,6 +3,5 @@ examples:
   rails:
   - form_form_with: Default
   - form_form_with_validate: Default + Validation
-  - form_form_with_validation_msg: Validation + Custom Validation Message
   - form_form_with_loading: Default + Loading
   - form_with_required_indicator: With Optional Required Indicator

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

@@ -11,7 +11,6 @@ examples:
     - typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
     - typeahead_inline: Inline
     - typeahead_multi_kit: Multi Kit Options
-    - typeahead_createable: Createable
     - typeahead_error_state: Error State
     - typeahead_margin_bottom: Margin Bottom
     - typeahead_with_pills_color: With Pills (Custom Color)

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 16.5.0.pre.alpha.AVNGR110715795
+  version: 16.5.0.pre.alpha.PLAY2893datepickerlabelclicktoggle15576
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-04-15 00:00:00.000000000 Z
+date: 2026-04-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -600,8 +600,6 @@ files:
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dialog_submission.jsx
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dialog_submission.md
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.html.erb
@@ -1121,8 +1119,6 @@ files:
 - app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.md
 - app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb
 - app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.md
-- app/pb_kits/playbook/pb_form/docs/_form_form_with_validation_msg.html.erb
-- app/pb_kits/playbook/pb_form/docs/_form_form_with_validation_msg.md
 - app/pb_kits/playbook/pb_form/docs/_form_with_required_indicator.html.erb
 - app/pb_kits/playbook/pb_form/docs/_form_with_required_indicator.md
 - app/pb_kits/playbook/pb_form/docs/example.yml
@@ -2627,9 +2623,7 @@ files:
 - app/pb_kits/playbook/pb_typeahead/docs/_description.md
 - app/pb_kits/playbook/pb_typeahead/docs/_footer.md
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_async_createable.jsx
-- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_createable.html.erb
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_createable.jsx
-- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_createable.md
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_menu_list.jsx
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_options.html.erb
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_options.jsx

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

@@ -1,62 +0,0 @@
-import React, { useState } from "react";
-import { Button, Dialog, DatePicker } from "playbook-ui";
-
-const DatePickerDialogSubmission = () => {
-    const [isOpen, setIsOpen] = useState(false);
-    const [dateFixed, setDateFixed] = useState("");
-    const [pickerInstance, setPickerInstance] = useState(0);
-
-    const close = (clearDate = false) => {
-        if (clearDate) setDateFixed("");
-        setIsOpen(false);
-    };
-
-    const open = () => {
-        setPickerInstance((current) => current + 1);
-        setIsOpen(true);
-    };
-
-    const handleSubmit = () => {
-        if (!dateFixed.trim()) return;
-        close();
-    };
-
-    return (
-        <>
-            <Button 
-                onClick={open} 
-                text="Open Dialog" 
-            />
-            <Dialog
-                onClose={() => close(true)}
-                opened={isOpen}
-                size="md"
-                title="Date Picker: Dialog Submission Example"
-            >
-                <Dialog.Body>
-                    <DatePicker
-                        defaultDate={dateFixed || undefined}
-                        key={`fixed-${pickerInstance}`}
-                        label="Date"
-                        onChange={(dateStr) => setDateFixed(dateStr || "")}
-                        pickerId={`datePickerFixed-${pickerInstance}`}
-                        staticPosition={false}
-                    />
-                </Dialog.Body>
-                <Dialog.Footer>
-                    <Button 
-                        onClick={handleSubmit}
-                        text="Submit"
-                    />
-                    <Button 
-                        onClick={() => close(true)} 
-                        text="Cancel" 
-                        variant="link" 
-                    />
-                </Dialog.Footer>
-            </Dialog>
-        </>
-    );
-};
-
-export default DatePickerDialogSubmission;

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

@@ -1 +0,0 @@
-Use this pattern when a DatePicker lives inside a Dialog and needs to submit a selected value before closing. A unique `key` and `pickerId` will force the datePicker to remount each time the dialog opens.  

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validation_msg.html.erb

@@ -1,90 +0,0 @@
-<%
-  example_collection = [
-    OpenStruct.new(name: "Alabama", value: 1),
-    OpenStruct.new(name: "Alaska", value: 2),
-    OpenStruct.new(name: "Arizona", value: 3),
-    OpenStruct.new(name: "Arkansas", value: 4),
-    OpenStruct.new(name: "California", value: 5),
-    OpenStruct.new(name: "Colorado", value: 6),
-    OpenStruct.new(name: "Connecticut", value: 7),
-    OpenStruct.new(name: "Delaware", value: 8),
-    OpenStruct.new(name: "Florida", value: 9),
-    OpenStruct.new(name: "Georgia", value: 10),
-  ]
-%>
-
-
-<%
-  example_typeahead_options = [
-    { label: 'Orange', value: '#FFA500' },
-    { label: 'Red', value: '#FF0000' },
-    { label: 'Green', value: '#00FF00' },
-    { label: 'Blue', value: '#0000FF' },
-  ]
-%>
-
-
-<%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
-  <%= form.text_field :example_text_field_validation_msg, props: { label: "Text Field With Validation Message", required: true, validation: { message: "I am a custom validation message for text field." } } %>
-  <%= form.typeahead :example_typeahead_validation_msg, props: { data: { typeahead_example_msg: true, user: {} }, label: "Typeahead With Validation Message", placeholder: "Search for a user", required: true, validation: { message: "I am a custom validation message for typeahead." } } %>
-  <%= form.typeahead :example_typeahead_validation_react_msg, props: { options: example_typeahead_options, pills: true, label: "Typeahead With Validation Message (React Rendered)", placeholder: "Search for a color", required: true, validation: { message: "I am a custom validation message for React typeahead." } } %>
-  <%= form.select :example_select_validation_msg, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true, validation_message: "I am a custom validation message for select." } %>
-  <%= form.collection_select :example_collection_select_validation_msg, example_collection, :value, :name, props: { label: "Collection Select With Validation Message", blank_selection: "Select a State...", required: true, validation_message: "I am a custom validation message for collection select." } %>
-  <%= form.date_picker :example_date_picker_validation_msg, props: { label: "Date Picker With Validation Message", required: true, validation_message: "I am a custom validation message for date picker.", allow_input: true } %>
-  <%= form.time_picker :example_time_picker_validation_msg, props: { label: "Time Picker With Validation Message", required: true, validation_message: "I am a custom validation message for time picker." } %>
-
-  <%= form.actions do |action| %>
-    <%= action.submit %>
-    <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
-  <% end %>
-<% end %>
-
-<!-- form.typeahead user results example template -->
-<template data-typeahead-example-result-option>
-  <%= pb_rails("user", props: {
-    name: tag(:slot, name: "name"),
-    orientation: "horizontal",
-    align: "left",
-    avatar_url: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6zwAAAgcBApocMXEAAAAASUVORK5CYII=",
-    avatar: true
-    }) %>
-</template>
-
-<!-- form.typeahead JS example implementation -->
-<%= javascript_tag defer: "defer" do %>
-  document.addEventListener("pb-typeahead-kit-search", function(event) {
-    if (!event.target.dataset || !event.target.dataset.typeaheadExampleMsg) return
-
-    fetch(`https://api.github.com/search/users?q=${encodeURIComponent(event.detail.searchingFor)}`)
-      .then(response => response.json())
-      .then((result) => {
-        const resultOptionTemplate = document.querySelector("[data-typeahead-example-result-option]")
-
-        event.detail.setResults((result.items || []).map((user) => {
-          const wrapper = resultOptionTemplate.content.cloneNode(true)
-          wrapper.children[0].dataset.user = JSON.stringify(user)
-          wrapper.querySelector('slot[name="name"]').replaceWith(user.login)
-          wrapper.querySelector('img').dataset.src = user.avatar_url
-          return wrapper
-        }))
-      })
-  })
-
-
-  document.addEventListener("pb-typeahead-kit-result-option-selected", function(event) {
-    if (!event.target.dataset.typeaheadExampleMsg) return
-
-    const selectedUserJSON = event.detail.selected.firstElementChild.dataset.user
-    const selectedUserData = JSON.parse(selectedUserJSON)
-
-    // set the input field's value
-    event.target.querySelector('input[name=example_typeahead_validation_msg]').value = selectedUserData.login
-
-    // log the selected option's dataset
-    console.log('The selected user data:')
-    console.dir(selectedUserData)
-
-    // do even more with the data later - TBD
-    event.target.dataset.user = selectedUserJSON
-  })
-<% end %>

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validation_msg.md

@@ -1,13 +0,0 @@
-Custom validation messages allow you to override the browser's default validation text with your own messaging. This provides a better user experience by giving specific, actionable feedback.
-
-**Text-based inputs** (TextInput, Typeahead) use the `validation` prop with a `message` key:
-```ruby
-validation: { message: "Please enter a valid email address." }
-```
-
-**Selection-based inputs** (Select, DatePicker, TimePicker) use the `validation_message` prop:
-```ruby
-validation_message: "Please select an option."
-```
-
-When a required field is left empty or fails validation, your custom message will display instead of the generic browser default.

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_createable.html.erb

@@ -1,29 +0,0 @@
-<%
-  options = [
-    { label: 'Orange', value: '#FFA500' },
-    { label: 'Red', value: '#FF0000' },
-    { label: 'Green', value: '#00FF00' },
-    { label: 'Blue', value: '#0000FF' },
-  ]
-%>
-
-<%= pb_rails("typeahead", props: {
-    id: "typeahead-creatable",
-    placeholder: "All Colors",
-    options: options,
-    label: "Colors",
-    name: :foo,
-    createable: true,
-    pills: true,
-  })
-%>
-
-<%= javascript_tag defer: "defer" do %>
-  document.addEventListener("pb-typeahead-kit-typeahead-creatable-result-option-select", function(event) {
-    console.log('Single Option selected')
-    console.dir(event.detail)
-  })
-  document.addEventListener("pb-typeahead-kit-typeahead-creatable-result-clear", function() {
-    console.log('All options cleared')
-  })
-<% end %>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_createable.md

@@ -1 +0,0 @@
-The `createable` prop allows users to create new options by typing a value that doesn't exist in the options list.