playbook_ui_docs 16.1.0.pre.alpha.PLAY277013976 → 16.1.0.pre.alpha.PLAY277014019
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.md +1 -0
- data/app/pb_kits/playbook/pb_form/docs/_form_with_required_indicator.html.erb +1 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_label.jsx +44 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_label.md +1 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_label.jsx +28 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_label.md +1 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_default.html.erb +3 -3
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_default.jsx +3 -0
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_default.md +1 -0
- data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_on_handler.jsx +5 -2
- data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.html.erb +6 -0
- data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.jsx +16 -0
- data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.md +3 -0
- data/app/pb_kits/playbook/pb_time_picker/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_time_picker/docs/index.js +1 -0
- metadata +11 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 2b815ee376aa05b8997b7c3c79ab833d8b2a4ae11db5422a66673030f4f1b5b4
|
|
4
|
+
data.tar.gz: 4fa361e23349a16802edb2a0b6e0c2ec7f5e423291bea77ffb665f05a37ae133
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 2f157af98492e231927909567321cbac369d776805fa80f5b68c7aa43d6af6643cc731d3bd4ddd21a8dab60b30326bed01f8ae3aa542bccc906ac593541132fa
|
|
7
|
+
data.tar.gz: 8e43441cd466cc327107a08104936ef76db467ee5ec0839e9bf9f50f616e25b47f3c7991aa1c117863b1665943506bb0b1271f9636322ff1006c0aaba32a6563
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
`pickerId`/`picker_id` is a **required prop** to instantiate the Date Picker. The presence of `pickerId`/`picker_id` in your Date Picker also associates the label with the input, providing the ability to focus the Date Picker by clicking the label.
|
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
<%= form.password_field :example_password_field, props: { label: true, required: true, required_indicator: true } %>
|
|
10
10
|
<%= form.url_field :example_url_field, props: { label: true, required: true, required_indicator: true } %>
|
|
11
11
|
<%= form.phone_number_field :example_phone_number_field, props: { label: true, required: true, required_indicator: true } %>
|
|
12
|
+
<%= form.time_picker :example_time_picker_required_indicator, props: { label: true, required: true, required_indicator: true } %>
|
|
12
13
|
|
|
13
14
|
<%= form.actions do |action| %>
|
|
14
15
|
<%= action.submit %>
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
|
|
3
|
+
import { useEditor, EditorContent } from "@tiptap/react"
|
|
4
|
+
import StarterKit from "@tiptap/starter-kit"
|
|
5
|
+
import Link from '@tiptap/extension-link'
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
const RichTextEditorAdvancedLabel = (props) => {
|
|
9
|
+
|
|
10
|
+
const editor = useEditor({
|
|
11
|
+
extensions: [StarterKit, Link],
|
|
12
|
+
content: "Add your text here. You can format your text, add links, quotes, and bullets.",
|
|
13
|
+
})
|
|
14
|
+
|
|
15
|
+
const editorNoLabel = useEditor({
|
|
16
|
+
extensions: [StarterKit, Link],
|
|
17
|
+
content: "Add your text here. You can format your text, add links, quotes, and bullets.",
|
|
18
|
+
})
|
|
19
|
+
|
|
20
|
+
if (!editor || !editorNoLabel) return null
|
|
21
|
+
|
|
22
|
+
return (
|
|
23
|
+
<div>
|
|
24
|
+
<RichTextEditor
|
|
25
|
+
advancedEditor={editor}
|
|
26
|
+
id={"advanced-example"}
|
|
27
|
+
label="Advanced Example Label"
|
|
28
|
+
{...props}
|
|
29
|
+
>
|
|
30
|
+
<EditorContent editor={editor}/>
|
|
31
|
+
</RichTextEditor>
|
|
32
|
+
<br/>
|
|
33
|
+
<RichTextEditor
|
|
34
|
+
advancedEditor={editorNoLabel}
|
|
35
|
+
label="Advanced Example Label No ID"
|
|
36
|
+
{...props}
|
|
37
|
+
>
|
|
38
|
+
<EditorContent editor={editorNoLabel}/>
|
|
39
|
+
</RichTextEditor>
|
|
40
|
+
</div>
|
|
41
|
+
)
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
export default RichTextEditorAdvancedLabel
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
The optional `label` prop adds a visible label to the advanced editor. Passing in the `id` prop associates the `label` with the editor for accessibility, enabling screen reader support and label-based focus behavior.
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import React, { useState } from 'react'
|
|
2
|
+
import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
|
|
3
|
+
|
|
4
|
+
const RichTextEditorLabel = (props) => {
|
|
5
|
+
const [value, setValue] = useState(''),
|
|
6
|
+
handleOnChange = (html) => setValue(html)
|
|
7
|
+
|
|
8
|
+
return (
|
|
9
|
+
<div>
|
|
10
|
+
<RichTextEditor
|
|
11
|
+
id="example"
|
|
12
|
+
label="Example Label"
|
|
13
|
+
onChange={handleOnChange}
|
|
14
|
+
value={value}
|
|
15
|
+
{...props}
|
|
16
|
+
/>
|
|
17
|
+
<br/>
|
|
18
|
+
<RichTextEditor
|
|
19
|
+
label="Example Label No ID"
|
|
20
|
+
onChange={handleOnChange}
|
|
21
|
+
value={value}
|
|
22
|
+
{...props}
|
|
23
|
+
/>
|
|
24
|
+
</div>
|
|
25
|
+
)
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
export default RichTextEditorLabel
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
The optional `label` prop adds a visible label to the editor. Passing in the `id` prop associates the `label` with the editor for accessibility, enabling screen reader support and label-based focus behavior.
|
|
@@ -32,6 +32,8 @@ examples:
|
|
|
32
32
|
- rich_text_editor_advanced_inline: Advanced (Inline)
|
|
33
33
|
- rich_text_editor_advanced_height: Advanced Height
|
|
34
34
|
- rich_text_editor_advanced_min_height: Advanced Min Height
|
|
35
|
+
- rich_text_editor_label: Label
|
|
36
|
+
- rich_text_editor_advanced_label: Advanced (Label)
|
|
35
37
|
- rich_text_editor_required_indicator: Required Indicator
|
|
36
38
|
- rich_text_editor_advanced_required_indicator: Advanced Required Indicator
|
|
37
39
|
- rich_text_editor_preview: Preview
|
|
@@ -21,3 +21,5 @@ export { default as RichTextEditorAdvancedHeight } from './_rich_text_editor_adv
|
|
|
21
21
|
export { default as RichTextEditorAdvancedMinHeight } from './_rich_text_editor_advanced_min_height.jsx'
|
|
22
22
|
export { default as RichTextEditorRequiredIndicator } from './_rich_text_editor_required_indicator.jsx'
|
|
23
23
|
export { default as RichTextEditorAdvancedRequiredIndicator } from './_rich_text_editor_advanced_required_indicator.jsx'
|
|
24
|
+
export { default as RichTextEditorLabel } from './_rich_text_editor_label.jsx'
|
|
25
|
+
export { default as RichTextEditorAdvancedLabel } from './_rich_text_editor_advanced_label.jsx'
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
<%= pb_rails("textarea", props: { label: "Label", rows: 4}) %>
|
|
1
|
+
<%= pb_rails("textarea", props: { label: "Label", rows: 4, id: "default-example-1" }) %>
|
|
2
2
|
|
|
3
3
|
<br/>
|
|
4
4
|
|
|
5
|
-
<%= pb_rails("textarea", props: { label: "Label", placeholder: "Placeholder text" }) %>
|
|
5
|
+
<%= pb_rails("textarea", props: { label: "Label", placeholder: "Placeholder text", id: "default-example-2" }) %>
|
|
6
6
|
|
|
7
7
|
<br/>
|
|
8
8
|
|
|
9
|
-
<%= pb_rails("textarea", props: { label: "Label", name: "comment", value: "Default value text" }) %>
|
|
9
|
+
<%= pb_rails("textarea", props: { label: "Label", name: "comment", value: "Default value text", id: "default-example-3" }) %>
|
|
@@ -13,6 +13,7 @@ const TextareaDefault = (props) => {
|
|
|
13
13
|
label="Label"
|
|
14
14
|
rows={4}
|
|
15
15
|
{...props}
|
|
16
|
+
id="default-example-1"
|
|
16
17
|
/>
|
|
17
18
|
|
|
18
19
|
<br />
|
|
@@ -21,6 +22,7 @@ const TextareaDefault = (props) => {
|
|
|
21
22
|
label="Label"
|
|
22
23
|
placeholder="Placeholder text"
|
|
23
24
|
{...props}
|
|
25
|
+
id="default-example-2"
|
|
24
26
|
/>
|
|
25
27
|
|
|
26
28
|
<br />
|
|
@@ -32,6 +34,7 @@ const TextareaDefault = (props) => {
|
|
|
32
34
|
placeholder="Placeholder text"
|
|
33
35
|
value={value}
|
|
34
36
|
{...props}
|
|
37
|
+
id="default-example-3"
|
|
35
38
|
/>
|
|
36
39
|
|
|
37
40
|
</div>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Add an `id` to your Textarea so that clicking the label will move focus directly to the input.
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React, { useState } from 'react'
|
|
2
2
|
import TimePicker from '../../pb_time_picker/_time_picker'
|
|
3
3
|
import Body from '../../pb_body/_body'
|
|
4
|
+
import Flex from '../../pb_flex/_flex'
|
|
4
5
|
|
|
5
6
|
const TimePickerOnHandler = (props) => {
|
|
6
7
|
const [selectedTime, setSelectedTime] = useState('')
|
|
@@ -17,7 +18,9 @@ const TimePickerOnHandler = (props) => {
|
|
|
17
18
|
return (
|
|
18
19
|
<div>
|
|
19
20
|
{(selectedTime || closedTime) && (
|
|
20
|
-
<
|
|
21
|
+
<Flex marginBottom="sm"
|
|
22
|
+
orientation="column"
|
|
23
|
+
>
|
|
21
24
|
{selectedTime && (
|
|
22
25
|
<Body
|
|
23
26
|
text={`onChange: ${selectedTime}`}
|
|
@@ -29,7 +32,7 @@ const TimePickerOnHandler = (props) => {
|
|
|
29
32
|
text={`onClose: ${closedTime}`}
|
|
30
33
|
/>
|
|
31
34
|
)}
|
|
32
|
-
</
|
|
35
|
+
</Flex>
|
|
33
36
|
)}
|
|
34
37
|
<TimePicker
|
|
35
38
|
id="time-picker-on-handler"
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import TimePicker from '../_time_picker'
|
|
3
|
+
|
|
4
|
+
const TimePickerRequiredIndicator = (props) => (
|
|
5
|
+
<div>
|
|
6
|
+
<TimePicker
|
|
7
|
+
id="time-picker-required-indicator"
|
|
8
|
+
label="Select Time"
|
|
9
|
+
requiredIndicator
|
|
10
|
+
{...props}
|
|
11
|
+
/>
|
|
12
|
+
</div>
|
|
13
|
+
)
|
|
14
|
+
|
|
15
|
+
export default TimePickerRequiredIndicator
|
|
16
|
+
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
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.
|
|
2
|
+
|
|
3
|
+
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.
|
|
@@ -9,6 +9,7 @@ examples:
|
|
|
9
9
|
- time_picker_min_max_time: Min & Max Time
|
|
10
10
|
- time_picker_error: Error
|
|
11
11
|
- time_picker_disabled: Disabled
|
|
12
|
+
- time_picker_required_indicator: Required Indicator
|
|
12
13
|
- time_picker_input_options: Input Options
|
|
13
14
|
|
|
14
15
|
|
|
@@ -21,4 +22,5 @@ examples:
|
|
|
21
22
|
- time_picker_min_max_time: Min & Max Time
|
|
22
23
|
- time_picker_error: Error
|
|
23
24
|
- time_picker_disabled: Disabled
|
|
25
|
+
- time_picker_required_indicator: Required Indicator
|
|
24
26
|
- time_picker_on_handler: onChange & onClose Handlers
|
|
@@ -7,3 +7,4 @@ export { default as TimePickerOnHandler } from './_time_picker_on_handler.jsx'
|
|
|
7
7
|
export { default as TimePickerMinMaxTime } from './_time_picker_min_max_time.jsx'
|
|
8
8
|
export { default as TimePickerError } from './_time_picker_error.jsx'
|
|
9
9
|
export { default as TimePickerDisabled } from './_time_picker_disabled.jsx'
|
|
10
|
+
export { default as TimePickerRequiredIndicator } from './_time_picker_required_indicator.jsx'
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: playbook_ui_docs
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 16.1.0.pre.alpha.
|
|
4
|
+
version: 16.1.0.pre.alpha.PLAY277014019
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Power UX
|
|
@@ -9,7 +9,7 @@ authors:
|
|
|
9
9
|
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date: 2026-01-
|
|
12
|
+
date: 2026-01-30 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: playbook_ui
|
|
@@ -576,6 +576,7 @@ files:
|
|
|
576
576
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_anti_patterns.html.erb
|
|
577
577
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.html.erb
|
|
578
578
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.jsx
|
|
579
|
+
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.md
|
|
579
580
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb
|
|
580
581
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx
|
|
581
582
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md
|
|
@@ -1929,6 +1930,8 @@ files:
|
|
|
1929
1930
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_height.md
|
|
1930
1931
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_inline.jsx
|
|
1931
1932
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_inline.md
|
|
1933
|
+
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_label.jsx
|
|
1934
|
+
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_label.md
|
|
1932
1935
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_min_height.jsx
|
|
1933
1936
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_min_height.md
|
|
1934
1937
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_preview.jsx
|
|
@@ -1947,6 +1950,8 @@ files:
|
|
|
1947
1950
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_focus.jsx
|
|
1948
1951
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.html.erb
|
|
1949
1952
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.jsx
|
|
1953
|
+
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_label.jsx
|
|
1954
|
+
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_label.md
|
|
1950
1955
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.jsx
|
|
1951
1956
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.md
|
|
1952
1957
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb
|
|
@@ -2343,6 +2348,7 @@ files:
|
|
|
2343
2348
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_custom.jsx
|
|
2344
2349
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_default.html.erb
|
|
2345
2350
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_default.jsx
|
|
2351
|
+
- app/pb_kits/playbook/pb_textarea/docs/_textarea_default.md
|
|
2346
2352
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_default_swift.md
|
|
2347
2353
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_emoji_mask.html.erb
|
|
2348
2354
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_emoji_mask.jsx
|
|
@@ -2403,6 +2409,9 @@ files:
|
|
|
2403
2409
|
- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_min_max_time.md
|
|
2404
2410
|
- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_on_handler.jsx
|
|
2405
2411
|
- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_on_handler.md
|
|
2412
|
+
- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.html.erb
|
|
2413
|
+
- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.jsx
|
|
2414
|
+
- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.md
|
|
2406
2415
|
- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_timezone.html.erb
|
|
2407
2416
|
- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_timezone.jsx
|
|
2408
2417
|
- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_timezone.md
|