playbook_ui_docs 16.2.0.pre.rc.0 → 16.2.0.pre.rc.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c40fa5c6d421c2445061626943e409184e62016eca38f08753c31e61bf226889
-  data.tar.gz: 308cba6c72b275d4eddfab21482e5150e5c72f6e2db58cc8c893dd87d2ab9f6a
+  metadata.gz: c1ee1308ba44fb16c2b0d31b00a63f2ef234141ed5ad0b7282c9c066402e39c5
+  data.tar.gz: 8a296bd7c34e8400bcd24937e92bdb36a4ed158971dcef730c50a3d762d86d19
 SHA512:
-  metadata.gz: 768660e27e6a62a2662c8e4c36c0e4bc5b66af05c3562ab10f1b52398ef8e3df877cf42a21b969857080ee5454dbbcd4edb192decb82e4df47befb5f5cdfa13e
-  data.tar.gz: b785e25998e9fdd491bb9e7ac8c2b5ad1382ce2832bcbddc5560b0d2d29c81678fc469bbc6f2fd56623f8cf4ca653b906bb63a1f93c52ddf5c933a3e1087bda7
+  metadata.gz: 7989f4416926ee207c69ba6a1e7f2ae65b5b1af444f80e99bca227d8ca679e2bf192990a00dd01885d6f6d81e1bd6e78983dccef4cb89e94f2d820adbc858490
+  data.tar.gz: f8f5cd8faf825ea26882ef9c8d7f1c01e3f75f52f8e18379f9f47c2cf79fb1f9773564b7cca8ea4a36323560942e6f2f75e48e0b847057517f30ef1486d035c5

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

@@ -0,0 +1 @@
+`pickerId`/`picker_id` is a **required prop** to instantiate the Date Picker. The presence of `pickerId`/`picker_id` in your Date Picker also associates the label with the input, providing the ability to focus the Date Picker by clicking the label.

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

@@ -9,6 +9,7 @@
   <%= 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.phone_number_field :example_phone_number_field, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.time_picker :example_time_picker_required_indicator, props: { label: true, required: true, required_indicator: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_default.html.erb

@@ -1,9 +1,9 @@
-<%= pb_rails("textarea", props: { label: "Label", rows: 4}) %>
+<%= pb_rails("textarea", props: { label: "Label", rows: 4, id: "default-example-1" }) %>
 
 <br/>
 
-<%= pb_rails("textarea", props: { label: "Label", placeholder: "Placeholder text" }) %>
+<%= pb_rails("textarea", props: { label: "Label", placeholder: "Placeholder text", id: "default-example-2" }) %>
 
 <br/>
 
-<%= pb_rails("textarea", props: { label: "Label", name: "comment", value: "Default value text" }) %>
+<%= pb_rails("textarea", props: { label: "Label", name: "comment", value: "Default value text", id: "default-example-3" }) %>

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_default.jsx

@@ -13,6 +13,7 @@ const TextareaDefault = (props) => {
           label="Label"
           rows={4}
           {...props}
+          id="default-example-1"
       />
 
       <br />
@@ -21,6 +22,7 @@ const TextareaDefault = (props) => {
           label="Label"
           placeholder="Placeholder text"
           {...props}
+          id="default-example-2"
       />
 
       <br />
@@ -32,6 +34,7 @@ const TextareaDefault = (props) => {
           placeholder="Placeholder text"
           value={value}
           {...props}
+          id="default-example-3"
       />
 
     </div>

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_default.md

@@ -0,0 +1 @@
+Add an `id` to your Textarea so that clicking the label will move focus directly to the input.

data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_on_handler.jsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import TimePicker from '../../pb_time_picker/_time_picker'
 import Body from '../../pb_body/_body'
+import Flex from '../../pb_flex/_flex'
 
 const TimePickerOnHandler = (props) => {
   const [selectedTime, setSelectedTime] = useState('')
@@ -17,7 +18,9 @@ const TimePickerOnHandler = (props) => {
   return (
     <div>
       {(selectedTime || closedTime) && (
-        <div style={{ marginBottom: '16px' }}>
+        <Flex marginBottom="sm" 
+            orientation="column"
+        >
           {selectedTime && (
             <Body
                 text={`onChange: ${selectedTime}`}
@@ -29,7 +32,7 @@ const TimePickerOnHandler = (props) => {
                 text={`onClose: ${closedTime}`}
             />
           )}
-        </div>
+        </Flex>
       )}
       <TimePicker
           id="time-picker-on-handler"

data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.html.erb

@@ -0,0 +1,6 @@
+<%= pb_rails("time_picker", props: {
+  id: "time-picker-required-indicator",
+  label: "Select Time",
+  required_indicator: true,
+}) %>
+

data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import TimePicker from '../_time_picker'
+
+const TimePickerRequiredIndicator = (props) => (
+  <div>
+    <TimePicker
+        id="time-picker-required-indicator"
+        label="Select Time"
+        requiredIndicator
+        {...props}
+    />
+  </div>
+)
+
+export default TimePickerRequiredIndicator
+

data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.md

@@ -0,0 +1,3 @@
+The `requiredIndicator`/`required_indicator` prop displays a red asterisk (*) next to the label, visually indicating that the field is required. This is purely visual and does not enforce validation.
+
+You can use `requiredIndicator`/`required_indicator` with any validation approach: HTML5 validation via the `required` prop, client-side validation, or backend validation. For this reason, it works independently and doesn't need to be paired with the `required` prop.

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

@@ -9,6 +9,7 @@ examples:
   - time_picker_min_max_time: Min & Max Time
   - time_picker_error: Error
   - time_picker_disabled: Disabled
+  - time_picker_required_indicator: Required Indicator
   - time_picker_input_options: Input Options
   
   
@@ -21,4 +22,5 @@ examples:
   - time_picker_min_max_time: Min & Max Time
   - time_picker_error: Error
   - time_picker_disabled: Disabled
+  - time_picker_required_indicator: Required Indicator
   - time_picker_on_handler: onChange & onClose Handlers

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

@@ -7,3 +7,4 @@ export { default as TimePickerOnHandler } from './_time_picker_on_handler.jsx'
 export { default as TimePickerMinMaxTime } from './_time_picker_min_max_time.jsx'
 export { default as TimePickerError } from './_time_picker_error.jsx'
 export { default as TimePickerDisabled } from './_time_picker_disabled.jsx'
+export { default as TimePickerRequiredIndicator } from './_time_picker_required_indicator.jsx'

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 16.2.0.pre.rc.0
+  version: 16.2.0.pre.rc.1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-01-27 00:00:00.000000000 Z
+date: 2026-01-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -576,6 +576,7 @@ files:
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_anti_patterns.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.md
 - 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
@@ -2343,6 +2344,7 @@ files:
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_custom.jsx
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_default.html.erb
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_default.jsx
+- app/pb_kits/playbook/pb_textarea/docs/_textarea_default.md
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_default_swift.md
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_emoji_mask.html.erb
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_emoji_mask.jsx
@@ -2403,6 +2405,9 @@ files:
 - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_min_max_time.md
 - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_on_handler.jsx
 - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_on_handler.md
+- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.html.erb
+- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.jsx
+- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.md
 - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_timezone.html.erb
 - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_timezone.jsx
 - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_timezone.md