playbook_ui_docs 15.7.0 → 15.8.0.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 785d6561b9499279ffa5a3f2aab38571a743962d2de8f66b12b6d9beaecc60c4
-  data.tar.gz: 6875304ffd91afc147369b6de418c7ed668ae28b974bc6ac2adef136f71401ae
+  metadata.gz: a1da1d6d1ef24651b4b2d68d7d6fb4d24418a93237ede041deab2386aad9590e
+  data.tar.gz: 8bc4c34d0ed65dc094b8cf3e187a99af9a0f947df3eafd56973a9b2781a8486a
 SHA512:
-  metadata.gz: ff2ccd9f01c25491c8fb94b20cde950c1fdbbcb45d80f2ff56886d355182d1d5a43478683e9a549fd643d4af35d6bacbb08c8e1b3834d3d0961b52278fbe67b6
-  data.tar.gz: f3085b98700a563fa2a73152fa9b484e4ef85297dddc7aeea46fab8c8b0d598cb1a2a888c4138e44d041ea9c6b4ca034788708753217a27259d228cf2505d5b3
+  metadata.gz: b518dbb81c1684003780e9e096dccbc0bc428511d31e0a8a74dc2847a33ab84cc8283a84ae76731bfe34a622e7da2e03fe081fa421c966320734399a4ea9d902
+  data.tar.gz: 685a9397116fbd96752f7294021be526cbcea9c12cb174f5a9579797bd28e50a08b0ce90b4947550318b2d64d153867274ad367adcdbb9154666d02fa3248d8b

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

@@ -116,7 +116,7 @@
   <%= form.star_rating_field :example_star_rating, props: { variant: "interactive", label: true } %>
   <%= form.time_zone_select_field :example_time_zone_select, ActiveSupport::TimeZone.us_zones, { default: "Eastern Time (US & Canada)" }, props: { label: true } %>
   <%= form.multi_level_select :example_multi_level_select, props: { id: "multi-level-select-form-default", tree_data: treeData, margin_bottom: "sm", label: "Example Multi Level Select field" } %>
-
+  <%= form.time_picker :example_time_picker, props: { label: true } %>
   <%= form.actions do |action| %>
     <%= action.submit %>
     <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>

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

@@ -117,7 +117,8 @@
   <%= 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, validation_message: "Please select a time." } %>
+ 
   <%= form.actions do |action| %>
     <%= action.submit %>
     <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>

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

@@ -0,0 +1,14 @@
+<%= pb_form_with(scope: :example, url: "", method: :get, validate: true) do |form| %>
+  <%= 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.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.actions do |action| %>
+    <%= action.submit %>
+    <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,3 @@
+The `required_indicator` prop adds a red asterisk (*) to the input label, visually marking the field as required. This works with both `label: true` for auto-generated labels and `label: "Custom Text"` for custom labels.
+
+While it's typically used alongside the `required` prop for HTML5 validation, you can use `required_indicator` independently if you're handling validation differently (e.g., client-side or backend validation).

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

@@ -4,3 +4,4 @@ examples:
   - form_form_with: Default
   - form_form_with_validate: Default + Validation
   - form_form_with_loading: Default + Loading
+  - form_with_required_indicator: With Optional Required Indicator

data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.html.erb

@@ -39,8 +39,8 @@
         tooltip_id: "append-to-tooltip-2",
         offset: true,
         position: "top",
-        append_to: ".kit-show-wrapper",
+        append_to: ".pb--page--sideNav",
     }) do %>
-        I'm a popover. I have been appended to the .kit-show-wrapper.
+        I'm a popover. I have been appended to the .pb--page--sideNav.
     <% end %>
 <% end %>

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

@@ -54,14 +54,15 @@ const PopoverAppendTo = (props) => {
         <Body text="Click info for more details" />
         &nbsp;
         <PbReactPopover
-            appendTo=".kit-show-wrapper"
+            appendTo=".pb--page--sideNav"
             offset
             placement="top"
             reference={selectorPopoverReference}
             show={showSelectorPopover}
+            zIndex={10}
             {...props}
         >
-          {'I\'m a popover. I have been appended to the .kit-show-wrapper.'}
+          {'I\'m a popover. I have been appended to the .pb--page--sideNav.'}
         </PbReactPopover>
       </Flex>
     </>

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_emoji_mask.html.erb

@@ -0,0 +1,7 @@
+<%= pb_rails("text_input", props: {
+  emoji_mask: true,
+  label: "Emoji Mask",
+  placeholder: "Try typing or pasting emojis...",
+}) %>
+
+

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_emoji_mask.jsx

@@ -0,0 +1,24 @@
+import React, { useState } from 'react'
+
+import TextInput from '../../pb_text_input/_text_input'
+
+const TextInputEmojiMask = (props) => {
+  const [basicValue, setBasicValue] = useState('')
+
+  return (
+    <div>
+      <TextInput
+          emojiMask
+          label="Emoji Mask"
+          onChange={({ target }) => setBasicValue(target.value)}
+          placeholder="Try typing or pasting emojis..."
+          value={basicValue}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default TextInputEmojiMask
+
+

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_emoji_mask.md

@@ -0,0 +1,2 @@
+Use the `emojiMask` / `emoji_mask` prop to prevent users from entering emoji characters (🐸 🐈 🏄‍♂️) in typed or pasted content. It allows accented characters and other non-ASCII letters (é, ü, 文).
+

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_required_indicator.html.erb

@@ -0,0 +1,6 @@
+<%= pb_rails("text_input", props: {
+  label: "First Name",
+  placeholder: "Enter first name",
+  id: "text_input_required_indicator",
+  required_indicator: true,
+}) %>

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_required_indicator.jsx

@@ -0,0 +1,25 @@
+import React, { useState } from 'react'
+
+import TextInput from '../../pb_text_input/_text_input'
+
+const TextInputDefault = (props) => {
+  const [firstName, setFirstName] = useState('')
+  const handleOnChangeFirstName = ({ target }) => {
+    setFirstName(target.value)
+  }
+
+  return (
+      <TextInput
+          id="text_input_required_indicator"
+          label="First Name"
+          name="firstName"
+          onChange={handleOnChangeFirstName}
+          placeholder="Enter first name"
+          requiredIndicator
+          value={firstName}
+          {...props}
+      />
+  )
+}
+
+export default TextInputDefault

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_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_text_input/docs/example.yml

@@ -10,6 +10,9 @@ examples:
   - text_input_options: Input Options
   - text_input_mask: Mask
   - text_input_autocomplete: Autocomplete
+  - text_input_required_indicator: Required Indicator
+  - text_input_emoji_mask: Emoji Mask
+
   
   react:
   - text_input_default: Default
@@ -22,6 +25,8 @@ examples:
   - text_input_mask: Mask
   - text_input_sanitize: Sanitized Masked Input
   - text_input_autocomplete: Autocomplete
+  - text_input_required_indicator: Required Indicator
+  - text_input_emoji_mask: Emoji Mask
 
 
   swift:

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

@@ -8,3 +8,5 @@ export { default as TextInputNoLabel } from './_text_input_no_label.jsx'
 export { default as TextInputMask } from './_text_input_mask.jsx'
 export { default as TextInputSanitize } from './_text_input_sanitize.jsx'
 export { default as TextInputAutocomplete } from './_text_input_autocomplete.jsx'
+export { default as TextInputRequiredIndicator } from './_text_input_required_indicator.jsx'
+export { default as TextInputEmojiMask } from './_text_input_emoji_mask.jsx'

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

@@ -0,0 +1,5 @@
+<%= pb_rails("textarea", props: {
+  emoji_mask: true,
+  label: "Emoji Mask",
+  placeholder: "Try typing or pasting emojis...",
+}) %>

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

@@ -0,0 +1,24 @@
+import React, { useState } from 'react'
+
+import Textarea from '../../pb_textarea/_textarea'
+
+const TextareaEmojiMask = (props) => {
+  const [basicValue, setBasicValue] = useState('')
+
+  return (
+    <div>
+      <Textarea
+          emojiMask
+          label="Emoji Mask"
+          onChange={({ target }) => setBasicValue(target.value)}
+          placeholder="Try typing or pasting emojis..."
+          value={basicValue}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default TextareaEmojiMask
+
+

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

@@ -0,0 +1 @@
+Use the `emojiMask` / `emoji_mask` prop to prevent users from entering emoji characters (🐸 🐈 🏄‍♂️) in typed or pasted content. It allows accented characters and other non-ASCII letters (é, ü, 文).

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

@@ -7,6 +7,7 @@ examples:
   - textarea_error: Textarea w/ Error
   - textarea_character_counter: Character Counter
   - textarea_inline: Inline
+  - textarea_emoji_mask: Emoji Mask
 
   react:
   - textarea_default: Default
@@ -15,6 +16,7 @@ examples:
   - textarea_error: Textarea w/ Error
   - textarea_character_counter: Character Counter
   - textarea_inline: Inline
+  - textarea_emoji_mask: Emoji Mask
 
   swift:
   - textarea_default_swift: Default

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

@@ -4,3 +4,4 @@ export { default as TextareaCustom } from './_textarea_custom.jsx'
 export { default as TextareaError } from './_textarea_error.jsx'
 export { default as TextareaCharacterCounter } from './_textarea_character_counter.jsx'
 export { default as TextareaInline } from './_textarea_inline.jsx'
+export { default as TextareaEmojiMask } from './_textarea_emoji_mask.jsx'

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

@@ -0,0 +1,2 @@
+<%= pb_rails("time_picker", props: { id: "time-picker-24-hour", label: "24-Hour Format", time_format: "24hour" }) %>
+

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

@@ -0,0 +1,16 @@
+import React from 'react'
+import TimePicker from '../../pb_time_picker/_time_picker'
+
+const TimePicker24Hour = (props) => (
+  <div>
+    <TimePicker
+        id="time-picker-24-hour"
+        label="24-Hour Format"
+        timeFormat="24hour"
+        {...props}
+    />
+  </div>
+)
+
+export default TimePicker24Hour
+

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

@@ -0,0 +1 @@
+Set `time_format` / `timeFormat` to 24hour to display the time selection dropdown in a 24-hour format.

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

@@ -0,0 +1 @@
+<%= pb_rails("time_picker", props: { id: "time-picker-default" }) %>

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

@@ -0,0 +1,13 @@
+import React from 'react'
+import TimePicker from '../../pb_time_picker/_time_picker'
+
+const TimePickerDefault = (props) => (
+  <div>
+    <TimePicker
+        id="time-picker-default"
+        {...props}
+    />
+  </div>
+)
+
+export default TimePickerDefault

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

@@ -0,0 +1 @@
+Use the Time Picker for time-only selection. For date and time selection, use the [DatePicker with Time Selection Enabled](https://playbook.powerapp.cloud/kits/date_picker/react#time-selection) instead.

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

@@ -0,0 +1,4 @@
+<%= pb_rails("time_picker", props: { id: "time-picker-default-time-12hr", default_time: "2:30 PM", label: "12-Hour Format (2:30 PM)" }) %>
+<%= pb_rails("time_picker", props: { id: "time-picker-default-time-24hr", default_time: "14:30", label: "24-Hour Format (14:30)" }) %>
+<%= pb_rails("time_picker", props: { id: "time-picker-default-time-24hr-format", default_time: "14:30", label: "24-Hour Format with timeFormat (14:30)", time_format: "24hour" }) %>
+

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

@@ -0,0 +1,29 @@
+import React from 'react'
+import TimePicker from '../../pb_time_picker/_time_picker'
+
+const TimePickerDefaultTime = (props) => (
+  <div>
+    <TimePicker
+        defaultTime="2:30 PM"
+        id="time-picker-default-time-12hr"
+        label="12-Hour Format (2:30 PM)"
+        {...props}
+    />
+    <TimePicker
+        defaultTime="14:30"
+        id="time-picker-default-time-24hr"
+        label="24-Hour Format (14:30)"
+        {...props}
+    />
+    <TimePicker
+        defaultTime="14:30"
+        id="time-picker-default-time-24hr-format"
+        label="24-Hour Format with timeFormat (14:30)"
+        timeFormat="24hour"
+        {...props}
+    />
+  </div>
+)
+
+export default TimePickerDefaultTime
+

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

@@ -0,0 +1 @@
+The `default_time` / `defaultTime` prop sets a default time value and accepts both 12-hour and 24-hour formats.

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

@@ -0,0 +1,13 @@
+<%= pb_rails("time_picker", props: {
+  disabled: true,
+  id: "time-picker-disabled",
+  label: "Disabled Time Picker"
+}) %>
+
+<%= pb_rails("time_picker", props: {
+  default_time: "14:30",
+  disabled: true,
+  id: "time-picker-disabled-with-value",
+  label: "Disabled with Default Time"
+}) %>
+

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

@@ -0,0 +1,23 @@
+import React from 'react'
+import TimePicker from '../../pb_time_picker/_time_picker'
+
+const TimePickerDisabled = (props) => (
+  <div>
+    <TimePicker
+        disabled
+        id="time-picker-disabled"
+        label="Disabled Time Picker"
+        {...props}
+    />
+    <TimePicker
+        defaultTime="14:30"
+        disabled
+        id="time-picker-disabled-with-value"
+        label="Disabled with Default Time"
+        {...props}
+    />
+  </div>
+)
+
+export default TimePickerDisabled
+

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

@@ -0,0 +1,5 @@
+<%= pb_rails("time_picker", props: {
+  error: "Please select a valid time",
+  id: "time-picker-error"
+}) %>
+

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

@@ -0,0 +1,15 @@
+import React from 'react'
+import TimePicker from '../../pb_time_picker/_time_picker'
+
+const TimePickerError = (props) => (
+  <div>
+    <TimePicker
+        error="Please select a valid time"
+        id="time-picker-error"
+        {...props}
+    />
+  </div>
+)
+
+export default TimePickerError
+

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

@@ -0,0 +1,14 @@
+<%= pb_rails("time_picker", props: {
+  id: "time-picker-input-options",
+  label: "Appointment Time",
+  input_options: {
+    aria: { 
+      describedby: "appointment-help-text",
+      label: "Select your preferred appointment time"
+    },
+    data: { 
+      testid: "appointment-time-input"
+    },
+    placeholder: "Choose a time"
+  }
+}) %>

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

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

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

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

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

@@ -0,0 +1,42 @@
+<%= pb_rails("time_picker", props: { 
+  id: "time-picker-min-only",
+  label: "Minimum Time Only",
+  min_time: "09:00",
+}) %>
+
+<%= pb_rails("time_picker", props: { 
+  id: "time-picker-max-only",
+  label: "Maximum Time Only",
+  max_time: "17:00",
+  time_format: "24hour",
+}) %>
+
+<%= pb_rails("time_picker", props: { 
+  id: "time-picker-min-max-12hr",
+  label: "Min & Max Time Range (12-hour)",
+  min_time: "09:00",
+  max_time: "17:00",
+}) %>
+
+<%= pb_rails("time_picker", props: { 
+  id: "time-picker-min-max-24hr",
+  label: "Min & Max Time Range (24-hour)",
+  min_time: "09:00",
+  max_time: "17:00",
+  time_format: "24hour",
+}) %>
+
+<%= pb_rails("time_picker", props: { 
+  id: "time-picker-pm-only",
+  label: "PM Only Range (AM disabled)",
+  min_time: "13:00",
+  max_time: "17:00",
+}) %>
+
+<%= pb_rails("time_picker", props: { 
+  id: "time-picker-am-only",
+  label: "AM Only Range (PM disabled)",
+  min_time: "06:00",
+  max_time: "11:30"
+}) %>
+

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

@@ -0,0 +1,52 @@
+import React from 'react'
+import TimePicker from '../../pb_time_picker/_time_picker'
+
+const TimePickerMinMaxTime = (props) => (
+  <div>
+    <TimePicker
+        id="time-picker-min-only"
+        label="Minimum Time Only"
+        minTime="09:00"
+        {...props}
+    />
+    <TimePicker
+        id="time-picker-max-only"
+        label="Maximum Time Only"
+        maxTime="17:00"
+        timeFormat="24hour"
+        {...props}
+    />
+    <TimePicker
+        id="time-picker-min-max-12hr"
+        label="Min & Max Time Range (12-hour)"
+        maxTime="17:00"
+        minTime="09:00"
+        {...props}
+    />
+    <TimePicker
+        id="time-picker-min-max-24hr"
+        label="Min & Max Time Range (24-hour)"
+        maxTime="17:00"
+        minTime="09:00"
+        timeFormat="24hour"
+        {...props}
+    />
+    <TimePicker
+        id="time-picker-pm-only"
+        label="PM Only Range (AM disabled)"
+        maxTime="17:00"
+        minTime="13:00"
+        {...props}
+    />
+    <TimePicker
+        id="time-picker-am-only"
+        label="AM Only Range (PM disabled)"
+        maxTime="11:30"
+        minTime="06:00"
+        {...props}
+    />
+  </div>
+)
+
+export default TimePickerMinMaxTime
+

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

@@ -0,0 +1 @@
+Use the `min_time` / `minTime` and `max_time` / `maxTime` props to restrict the selectable time range. This example demonstrates minimum-only, maximum-only, and combined ranges in both 12-hour and 24-hour formats.

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

@@ -0,0 +1,45 @@
+import React, { useState } from 'react'
+import TimePicker from '../../pb_time_picker/_time_picker'
+import Body from '../../pb_body/_body'
+
+const TimePickerOnHandler = (props) => {
+  const [selectedTime, setSelectedTime] = useState('')
+  const [closedTime, setClosedTime] = useState('')
+
+  const handleTimeChange = (time) => {
+    setSelectedTime(time)
+  }
+
+  const handleTimeClose = (time) => {
+    setClosedTime(time)
+  }
+
+  return (
+    <div>
+      {(selectedTime || closedTime) && (
+        <div style={{ marginBottom: '16px' }}>
+          {selectedTime && (
+            <Body
+                text={`onChange: ${selectedTime}`}
+            />
+          )}
+          {closedTime && (
+            <Body
+                marginTop={selectedTime ? "xs" : "none"}
+                text={`onClose: ${closedTime}`}
+            />
+          )}
+        </div>
+      )}
+      <TimePicker
+          id="time-picker-on-handler"
+          onChange={handleTimeChange}
+          onClose={handleTimeClose}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default TimePickerOnHandler
+

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

@@ -0,0 +1 @@
+Demonstrates the `onChange` and `onClose` event handlers for the Time Picker.

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

@@ -0,0 +1,3 @@
+<%= pb_rails("time_picker", props: { id: "time-picker-timezone", show_timezone: true }) %>
+<%= pb_rails("time_picker", props: { id: "time-picker-timezone-24hour", show_timezone: true, time_format: "24hour" }) %>
+

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

@@ -0,0 +1,21 @@
+import React from 'react'
+import TimePicker from '../../pb_time_picker/_time_picker'
+
+const TimePickerTimezone = (props) => (
+  <div>
+    <TimePicker
+        id="time-picker-timezone"
+        showTimezone
+        {...props}
+    />
+    <TimePicker
+        id="time-picker-timezone-24hour"
+        showTimezone
+        timeFormat="24hour"
+        {...props}
+    />
+  </div>
+)
+
+export default TimePickerTimezone
+

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

@@ -0,0 +1 @@
+Enable timezone display by passing `show_timezone` / `showTimezone`.

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

@@ -0,0 +1,24 @@
+examples:
+  
+  rails:
+  - time_picker_default: Default
+  - time_picker_24_hour: 24-Hour Format
+  - time_picker_default_time: Default Time
+  - time_picker_label: Custom Label
+  - time_picker_timezone: With Timezone
+  - time_picker_min_max_time: Min & Max Time
+  - time_picker_error: Error
+  - time_picker_disabled: Disabled
+  - time_picker_input_options: Input Options
+  
+  
+  react:
+  - time_picker_default: Default
+  - time_picker_24_hour: 24-Hour Format
+  - time_picker_default_time: Default Time
+  - time_picker_label: Custom Label
+  - time_picker_timezone: With Timezone
+  - time_picker_min_max_time: Min & Max Time
+  - time_picker_error: Error
+  - time_picker_disabled: Disabled
+  - time_picker_on_handler: onChange & onClose Handlers

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

@@ -0,0 +1,9 @@
+export { default as TimePickerDefault } from './_time_picker_default.jsx'
+export { default as TimePickerDefaultTime } from './_time_picker_default_time.jsx'
+export { default as TimePicker24Hour } from './_time_picker_24_hour.jsx'
+export { default as TimePickerLabel } from './_time_picker_label.jsx'
+export { default as TimePickerTimezone } from './_time_picker_timezone.jsx'
+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'

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 15.7.0
+  version: 15.8.0.pre.rc.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-12-19 00:00:00.000000000 Z
+date: 2026-01-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -1123,6 +1123,8 @@ 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_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
 - app/pb_kits/playbook/pb_form_group/docs/_form_group_button.html.erb
 - app/pb_kits/playbook/pb_form_group/docs/_form_group_button.jsx
@@ -2378,6 +2380,9 @@ files:
 - app/pb_kits/playbook/pb_text_input/docs/_text_input_disabled.html.erb
 - app/pb_kits/playbook/pb_text_input/docs/_text_input_disabled.jsx
 - app/pb_kits/playbook/pb_text_input/docs/_text_input_disabled_swift.md
+- app/pb_kits/playbook/pb_text_input/docs/_text_input_emoji_mask.html.erb
+- app/pb_kits/playbook/pb_text_input/docs/_text_input_emoji_mask.jsx
+- app/pb_kits/playbook/pb_text_input/docs/_text_input_emoji_mask.md
 - app/pb_kits/playbook/pb_text_input/docs/_text_input_error.html.erb
 - app/pb_kits/playbook/pb_text_input/docs/_text_input_error.jsx
 - app/pb_kits/playbook/pb_text_input/docs/_text_input_error.md
@@ -2391,6 +2396,9 @@ files:
 - app/pb_kits/playbook/pb_text_input/docs/_text_input_no_label.jsx
 - app/pb_kits/playbook/pb_text_input/docs/_text_input_options.html.erb
 - app/pb_kits/playbook/pb_text_input/docs/_text_input_props_swift.md
+- app/pb_kits/playbook/pb_text_input/docs/_text_input_required_indicator.html.erb
+- app/pb_kits/playbook/pb_text_input/docs/_text_input_required_indicator.jsx
+- app/pb_kits/playbook/pb_text_input/docs/_text_input_required_indicator.md
 - app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.jsx
 - app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.md
 - app/pb_kits/playbook/pb_text_input/docs/example.yml
@@ -2404,6 +2412,9 @@ files:
 - 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_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
+- app/pb_kits/playbook/pb_textarea/docs/_textarea_emoji_mask.md
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_error.html.erb
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_error.jsx
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_error.md
@@ -2434,6 +2445,32 @@ files:
 - app/pb_kits/playbook/pb_time/docs/_time_unstyled.md
 - app/pb_kits/playbook/pb_time/docs/example.yml
 - app/pb_kits/playbook/pb_time/docs/index.js
+- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_24_hour.html.erb
+- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_24_hour.jsx
+- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_24_hour.md
+- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_default.html.erb
+- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_default.jsx
+- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_default.md
+- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_default_time.html.erb
+- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_default_time.jsx
+- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_default_time.md
+- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_disabled.html.erb
+- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_disabled.jsx
+- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_error.html.erb
+- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_error.jsx
+- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_input_options.html.erb
+- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_label.html.erb
+- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_label.jsx
+- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_min_max_time.html.erb
+- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_min_max_time.jsx
+- 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_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
+- app/pb_kits/playbook/pb_time_picker/docs/example.yml
+- app/pb_kits/playbook/pb_time_picker/docs/index.js
 - app/pb_kits/playbook/pb_time_range_inline/docs/_time_range_inline_default.html.erb
 - app/pb_kits/playbook/pb_time_range_inline/docs/_time_range_inline_default.jsx
 - app/pb_kits/playbook/pb_time_range_inline/docs/example.yml