playbook_ui_docs 15.7.0.pre.alpha.play263313229 → 15.7.0.pre.rc.0

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

@@ -1,3 +0,0 @@
-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/_time_picker_24_hour.html.erb

@@ -1,2 +0,0 @@
-<%= 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

@@ -1,16 +0,0 @@
-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

@@ -1 +0,0 @@
-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

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

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

@@ -1,13 +0,0 @@
-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

@@ -1 +0,0 @@
-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

@@ -1,4 +0,0 @@
-<%= 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

@@ -1,29 +0,0 @@
-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

@@ -1 +0,0 @@
-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

@@ -1,13 +0,0 @@
-<%= 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

@@ -1,23 +0,0 @@
-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

@@ -1,5 +0,0 @@
-<%= 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

@@ -1,15 +0,0 @@
-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

@@ -1,14 +0,0 @@
-<%= 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

@@ -1,2 +0,0 @@
-<%= 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

@@ -1,15 +0,0 @@
-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

@@ -1,42 +0,0 @@
-<%= 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

@@ -1,52 +0,0 @@
-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

@@ -1 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1 +0,0 @@
-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

@@ -1,3 +0,0 @@
-<%= 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

@@ -1,21 +0,0 @@
-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

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

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

@@ -1,24 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,60 +0,0 @@
-<%= 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

@@ -1,118 +0,0 @@
-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

@@ -1 +0,0 @@
-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.