playbook_ui_docs 15.6.0.pre.rc.4 → 15.7.0.pre.alpha.PLAY2675dropdownquickpickcustomquickpickdates13330

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,8 @@ examples:
   - text_input_options: Input Options
   - text_input_mask: Mask
   - text_input_autocomplete: Autocomplete
+  - text_input_required_indicator: Required Indicator
+
   
   react:
   - text_input_default: Default
@@ -22,6 +24,7 @@ examples:
   - text_input_mask: Mask
   - text_input_sanitize: Sanitized Masked Input
   - text_input_autocomplete: Autocomplete
+  - text_input_required_indicator: Required Indicator
 
 
   swift:

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

@@ -8,3 +8,4 @@ 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'

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

@@ -1 +1 @@
-Textarea w/ Error shows that the radio option must be selected or is invalid (ie when used in a form it signals a user to fix an error).
+Textarea w/ Error shows that the input must be filled out (i.e. when used in a form it signals a user to fix an error).

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'

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_show_current_year.html.erb

@@ -0,0 +1,60 @@
+<%= pb_rails("timeline", props: {orientation: "horizontal", show_date: true}) do %>
+    <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal", line_style: "solid", date: Date.today, show_current_year: true }) do %>
+        <%= pb_rails("title_detail", props: {
+            title: "Jackson Heights",
+            detail: "37-27 74th Street"
+        }) %>
+    <% end %>
+    <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted" }) do %>
+        <%= pb_rails("title_detail", props: {
+            title: "Greenpoint",
+            detail: "81 Gate St Brooklyn"
+        }) %>
+    <% end %>
+    <%= pb_rails("timeline/item", props: { line_style: "solid"}) do |item| %>
+      <% item.label do %>
+        <%= pb_rails("timeline/label", props: { date: Date.today, show_current_year: true }) %>
+      <% end %>
+      <% item.step do %>
+        <%= pb_rails("timeline/step", props: { icon: 'map-marker-alt', icon_color: 'purple' }) %>
+      <% end %>
+      <% item.detail do %>
+        <%= pb_rails("title_detail", props: {
+          title: "Society Hill",
+          detail: "72 E St Astoria"
+        }) %>
+      <% end %>
+    <% end %>
+<% end %>
+
+<br /><br /><br />
+
+<%= pb_rails("timeline", props: {orientation: "vertical", show_date: true}) do %>
+    <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal", line_style: "solid", date: Date.today, show_current_year: true }) do %>
+        <%= pb_rails("title_detail", props: {
+            title: "Jackson Heights",
+            detail: "37-27 74th Street"
+        }) %>
+    <% end %>
+    <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted" }) do %>
+        <%= pb_rails("title_detail", props: {
+            title: "Greenpoint",
+            detail: "81 Gate St Brooklyn"
+        }) %>
+    <% end %>
+    <%= pb_rails("timeline/item", props: { line_style: "solid"}) do |item| %>
+      <% item.label do %>
+        <%= pb_rails("timeline/label", props: { date: Date.today, show_current_year: true }) %>
+      <% end %>
+      <% item.step do %>
+        <%= pb_rails("timeline/step", props: { icon: 'map-marker-alt', icon_color: 'purple' }) %>
+      <% end %>
+      <% item.detail do %>
+        <%= pb_rails("title_detail", props: {
+          title: "Society Hill",
+          detail: "72 E St Astoria"
+        }) %>
+      <% end %>
+    <% end %>
+<% end %>
+

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_show_current_year.jsx

@@ -0,0 +1,118 @@
+import React from 'react'
+
+import Timeline from '../_timeline'
+import TitleDetail from '../../pb_title_detail/_title_detail'
+
+const TimelineShowCurrentYear = (props) => (
+  <div>
+    <Timeline
+        orientation="horizontal"
+        showDate
+        {...props}
+    >
+      <Timeline.Item
+          date={new Date()}
+          icon="user"
+          iconColor="royal"
+          showCurrentYear
+          {...props}
+      >
+        <TitleDetail
+            detail="37-27 74th Street"
+            title="Jackson Heights"
+            {...props}
+        />
+      </Timeline.Item>
+      <Timeline.Item
+          icon="check"
+          iconColor="teal"
+          lineStyle="dotted"
+          {...props}
+      >
+        <TitleDetail
+            detail="81 Gate St Brooklyn"
+            title="Greenpoint"
+            {...props}
+        />
+      </Timeline.Item>
+      <Timeline.Item
+          lineStyle="solid"
+          {...props}
+      >
+        <Timeline.Label
+            date={new Date()}
+            showCurrentYear
+        />
+        <Timeline.Step
+            icon="map-marker-alt"
+            iconColor="purple"
+        />
+        <Timeline.Detail>
+          <TitleDetail
+              detail="72 E St Astoria"
+              title="Society Hill"
+              {...props}
+          />
+        </Timeline.Detail>
+      </Timeline.Item>
+    </Timeline>
+
+    <br />
+    <br />
+    <br />
+
+    <Timeline
+        orientation="vertical"
+        showDate
+        {...props}
+    >
+      <Timeline.Item
+          date={new Date()}
+          icon="user"
+          iconColor="royal"
+          showCurrentYear
+          {...props}
+      >
+        <TitleDetail
+            detail="37-27 74th Street"
+            title="Jackson Heights"
+            {...props}
+        />
+      </Timeline.Item>
+      <Timeline.Item
+          icon="check"
+          iconColor="teal"
+          lineStyle="dotted"
+          {...props}
+      >
+        <TitleDetail
+            detail="81 Gate St Brooklyn"
+            title="Greenpoint"
+            {...props}
+        />
+      </Timeline.Item>
+      <Timeline.Item
+          lineStyle="solid"
+          {...props}
+      >
+        <Timeline.Label
+            date={new Date()}
+            showCurrentYear
+        />
+        <Timeline.Step
+            icon="map-marker-alt"
+            iconColor="purple"
+        />
+        <Timeline.Detail>
+          <TitleDetail
+              detail="72 E St Astoria"
+              title="Society Hill"
+              {...props}
+          />
+        </Timeline.Detail>
+      </Timeline.Item>
+    </Timeline>
+  </div>
+)
+
+export default TimelineShowCurrentYear

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_show_current_year.md

@@ -0,0 +1 @@
+By default, the Timeline kit does NOT display the year if it is the current year. If you want to display the current year you can do so by setting `showCurrentYear`/`show_current_year` to true. Pass it to `Timeline.Item`/`timeline/item` when using its `date` prop, or to `Timeline.Label`/`timeline/label` if following the "With Children" pattern.

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.md

@@ -1 +1 @@
-Use the optional `showDate` prop to render the timeline kit with a visible date. If the date is from the current year, the year will not be displayed, however if date is NOT from the current year, the kit will display the year as well.
+Use the optional `showDate` prop to render the timeline kit with a visible date. By default, if the date is from the current year, the year will not be displayed; however, if the date is NOT from the current year, the kit will display the year as well.