playbook_ui_docs 15.6.0 → 15.7.0.pre.alpha.PLAY2678emojimask13284

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/_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_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'

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.

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

@@ -5,6 +5,7 @@ examples:
   - timeline_vertical: Vertical
   - timeline_with_date: With Date
   - timeline_with_children: With Children
+  - timeline_show_current_year: Show Current Year
   - timeline_with_gap: With Gap
 
 
@@ -13,4 +14,5 @@ examples:
   - timeline_vertical: Vertical
   - timeline_with_date: With Date
   - timeline_with_children: With Children
+  - timeline_show_current_year: Show Current Year
   - timeline_with_gap: With Gap

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

@@ -3,4 +3,5 @@ export { default as TimelineVertical } from './_timeline_vertical.jsx'
 export { default as TimelineWithDate } from './_timeline_with_date.jsx'
 export { default as TimelineWithChildren } from './_timeline_with_children.jsx'
 export { default as TimelineWithGap } from './_timeline_with_gap.jsx'
+export { default as TimelineShowCurrentYear } from './_timeline_show_current_year.jsx'