playbook_ui_docs 16.2.0.pre.rc.0 → 16.2.0.pre.rc.2
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_advanced_table/docs/_advanced_table_column_styling_background_custom.jsx +71 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background_custom.md +4 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_required_indicator.html.erb +6 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_required_indicator.jsx +17 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_required_indicator.md +3 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb +6 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.md +3 -1
- data/app/pb_kits/playbook/pb_form/docs/_form_with_required_indicator.html.erb +6 -3
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.html.erb +3 -3
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.jsx +4 -7
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.md +3 -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_advanced_required_indicator.jsx +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/_rich_text_editor_required_indicator.jsx +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
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_required_indicator.html.erb +16 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_required_indicator.jsx +23 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_required_indicator.md +3 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/index.js +22 -21
- metadata +20 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: d3b6fb96c09842d385fe4aae71005f82bd4d39a3e560a40c3f665226d157c313
|
|
4
|
+
data.tar.gz: 9c469919182b7a426274b09021ad913da2a49bbd3dd2ced2a3bdf45504e81077
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: ce7ee69b2a2a96d1f87efa0e7f70d2b7f90c92cd1e3894491c6c27729a0538caa08c31c107f9856ff09f717b8fb1181c18610d9dfe15141b47683d5dfeffb8dd
|
|
7
|
+
data.tar.gz: 958c9f22fd8463327a80fe8781f2e6f625c9b7fea136a21999ab3d26666c85612df4164039850fb8bdf862e1ab04431b4b034356f5f866907dcd950c35bed0a6
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import React from "react"
|
|
2
|
+
import AdvancedTable from '../_advanced_table'
|
|
3
|
+
import colors from '../../tokens/exports/_colors.module.scss'
|
|
4
|
+
import MOCK_DATA from "./advanced_table_mock_data.json"
|
|
5
|
+
import Flex from '../../pb_flex/_flex'
|
|
6
|
+
import Title from '../../pb_title/_title'
|
|
7
|
+
import Body from '../../pb_body/_body'
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
const AdvancedTableColumnStylingBackgroundCustom = (props) => {
|
|
11
|
+
const columnDefinitions = [
|
|
12
|
+
{
|
|
13
|
+
accessor: "year",
|
|
14
|
+
label: "Year",
|
|
15
|
+
cellAccessors: ["quarter", "month", "day"],
|
|
16
|
+
customRenderer: (row, value) => (
|
|
17
|
+
<Flex flexDirection="column">
|
|
18
|
+
<Title size={4}
|
|
19
|
+
text={value}
|
|
20
|
+
/>
|
|
21
|
+
<Body text="lorem ipsum" />
|
|
22
|
+
<Body text="lorem ipsum" />
|
|
23
|
+
</Flex>
|
|
24
|
+
),
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
accessor: "newEnrollments",
|
|
28
|
+
label: "New Enrollments",
|
|
29
|
+
columnStyling:{
|
|
30
|
+
cellBackgroundColor: (row) => row.original.newEnrollments > 15 ? colors.success_subtle : colors.error_subtle,
|
|
31
|
+
fontColor: (row) => row.original.newEnrollments > 15 ? colors.success : colors.error,
|
|
32
|
+
},
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
accessor: "scheduledMeetings",
|
|
36
|
+
label: "Scheduled Meetings",
|
|
37
|
+
columnStyling:{
|
|
38
|
+
cellBackgroundColor: (row) => row.original.scheduledMeetings >= 15 ? colors.info_subtle : colors.warning_subtle
|
|
39
|
+
},
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
accessor: "attendanceRate",
|
|
43
|
+
label: "Attendance Rate",
|
|
44
|
+
columnStyling:{cellBackgroundColor: colors.info, headerBackgroundColor: colors.info, fontColor: colors.white, headerFontColor: colors.white},
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
accessor: "completedClasses",
|
|
48
|
+
label: "Completed Classes",
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
accessor: "classCompletionRate",
|
|
52
|
+
label: "Class Completion Rate",
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
accessor: "graduatedStudents",
|
|
56
|
+
label: "Graduated Students",
|
|
57
|
+
},
|
|
58
|
+
]
|
|
59
|
+
|
|
60
|
+
return (
|
|
61
|
+
<div>
|
|
62
|
+
<AdvancedTable
|
|
63
|
+
columnDefinitions={columnDefinitions}
|
|
64
|
+
tableData={MOCK_DATA}
|
|
65
|
+
{...props}
|
|
66
|
+
/>
|
|
67
|
+
</div>
|
|
68
|
+
)
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
export default AdvancedTableColumnStylingBackgroundCustom
|
|
@@ -78,6 +78,7 @@ examples:
|
|
|
78
78
|
- advanced_table_column_styling: Column Styling
|
|
79
79
|
- advanced_table_column_styling_column_headers: Column Styling with Multiple Headers
|
|
80
80
|
- advanced_table_column_styling_background: Column Styling Background Color
|
|
81
|
+
- advanced_table_column_styling_background_custom: Column Styling Background Color (Custom)
|
|
81
82
|
- advanced_table_column_styling_background_multi: Column Styling Background Color with Multiple Headers
|
|
82
83
|
- advanced_table_padding_control: Padding Control using Column Styling
|
|
83
84
|
- advanced_table_column_border_color: Column Group Border Color
|
|
@@ -47,4 +47,5 @@ export { default as AdvancedTableSortPerColumnForMultiColumn } from './_advanced
|
|
|
47
47
|
export { default as AdvancedTablePaddingControl } from './_advanced_table_padding_control.jsx'
|
|
48
48
|
export { default as AdvancedTablePaddingControlPerRow } from './_advanced_table_padding_control_per_row.jsx'
|
|
49
49
|
export { default as AdvancedTableColumnStylingBackground } from './_advanced_table_column_styling_background.jsx'
|
|
50
|
-
export { default as AdvancedTableColumnStylingBackgroundMulti } from './_advanced_table_column_styling_background_multi.jsx'
|
|
50
|
+
export { default as AdvancedTableColumnStylingBackgroundMulti } from './_advanced_table_column_styling_background_multi.jsx'
|
|
51
|
+
export { default as AdvancedTableColumnStylingBackgroundCustom } from './_advanced_table_column_styling_background_custom.jsx'
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import Checkbox from '../_checkbox'
|
|
3
|
+
|
|
4
|
+
const CheckboxRequiredIndicator = () => {
|
|
5
|
+
return (
|
|
6
|
+
<div>
|
|
7
|
+
<Checkbox
|
|
8
|
+
name="checkbox-name"
|
|
9
|
+
requiredIndicator
|
|
10
|
+
text="Checkbox label"
|
|
11
|
+
value="check-box value"
|
|
12
|
+
/>
|
|
13
|
+
</div>
|
|
14
|
+
)
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export default CheckboxRequiredIndicator
|
|
@@ -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.
|
|
@@ -8,6 +8,7 @@ examples:
|
|
|
8
8
|
- checkbox_indeterminate: Indeterminate Checkbox
|
|
9
9
|
- checkbox_disabled: Disabled Checkbox
|
|
10
10
|
- checkbox_form: Form and Hidden Input
|
|
11
|
+
# - checkbox_required_indicator: Required Indicator
|
|
11
12
|
|
|
12
13
|
react:
|
|
13
14
|
- checkbox_default: Default
|
|
@@ -17,6 +18,7 @@ examples:
|
|
|
17
18
|
- checkbox_error: Default w/ Error
|
|
18
19
|
- checkbox_indeterminate: Indeterminate Checkbox
|
|
19
20
|
- checkbox_disabled: Disabled Checkbox
|
|
21
|
+
# - checkbox_required_indicator: Required Indicator
|
|
20
22
|
|
|
21
23
|
swift:
|
|
22
24
|
- checkbox_default_swift: Default
|
|
@@ -5,3 +5,4 @@ export { default as CheckboxError } from './_checkbox_error.jsx'
|
|
|
5
5
|
export { default as CheckboxChecked } from './_checkbox_checked.jsx'
|
|
6
6
|
export { default as CheckboxIndeterminate } from './_checkbox_indeterminate.jsx'
|
|
7
7
|
export { default as CheckboxDisabled } from './_checkbox_disabled.jsx'
|
|
8
|
+
export { default as CheckboxRequiredIndicator } from './_checkbox_required_indicator.jsx'
|
|
@@ -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.
|
|
@@ -1,10 +1,13 @@
|
|
|
1
|
-
<%
|
|
1
|
+
<%
|
|
2
2
|
options = [
|
|
3
3
|
{ label: 'United States', value: 'unitedStates', id: 'us' },
|
|
4
4
|
{ label: 'Canada', value: 'canada', id: 'ca' },
|
|
5
5
|
{ label: 'Pakistan', value: 'pakistan', id: 'pk' },
|
|
6
6
|
]
|
|
7
|
-
|
|
8
7
|
%>
|
|
9
8
|
|
|
10
|
-
<%= pb_rails("dropdown", props: {
|
|
9
|
+
<%= pb_rails("dropdown", props: {
|
|
10
|
+
id: "select_a_country",
|
|
11
|
+
label: "Select a Country",
|
|
12
|
+
options: options
|
|
13
|
+
}) %>
|
|
@@ -1 +1,3 @@
|
|
|
1
|
-
The top-level Dropdown component optionally accepts any string through a `label` prop to produce a label above your trigger element.
|
|
1
|
+
The top-level Dropdown component optionally accepts any string through a `label` prop to produce a label above your trigger element.
|
|
2
|
+
|
|
3
|
+
Add an `id` to wire the label to the trigger so that clicking the label will move focus directly to the input, and open the drop-down.
|
|
@@ -1,14 +1,17 @@
|
|
|
1
1
|
<%= pb_form_with(scope: :example, url: "", method: :get, validate: true) do |form| %>
|
|
2
|
+
<%= form.typeahead :example_typeahead_field, props: { label: true, required: true, required_indicator: true } %>
|
|
2
3
|
<%= form.text_field :example_text_field, props: { label: true, required: true, required_indicator: true } %>
|
|
3
4
|
<%= form.text_field :example_text_field_2, props: { label: "Text Field Custom Label", required: true, required_indicator: true } %>
|
|
4
|
-
<%= form.
|
|
5
|
-
<%= form.text_area :example_text_area_2, props: { label: "Textarea Custom Label", required: true, required_indicator: true } %>
|
|
5
|
+
<%= form.phone_number_field :example_phone_number_field, props: { label: true, required: true, required_indicator: true } %>
|
|
6
6
|
<%= form.email_field :example_email_field, props: { label: true, required: true, required_indicator: true } %>
|
|
7
7
|
<%= form.number_field :example_number_field, props: { label: true, required: true, required_indicator: true } %>
|
|
8
8
|
<%= form.search_field :example_search_field, props: { label: true, required: true, required_indicator: true } %>
|
|
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
|
-
<%= form.
|
|
11
|
+
<%= form.text_area :example_text_area, props: { label: true, required: true, required_indicator: true } %>
|
|
12
|
+
<%= form.text_area :example_text_area_2, props: { label: "Textarea Custom Label", required: true, required_indicator: true } %>
|
|
13
|
+
<%# <%= form.check_box :example_checkbox, props: { label: true, text: "Checkbox Label", required: true, required_indicator: true } %>
|
|
14
|
+
<%= form.time_picker :example_time_picker_required_indicator, props: { label: true, required: true, required_indicator: true } %>
|
|
12
15
|
|
|
13
16
|
<%= form.actions do |action| %>
|
|
14
17
|
<%= action.submit %>
|
|
@@ -73,14 +73,11 @@ const MultiLevelSelectDefault = (props) => {
|
|
|
73
73
|
return (
|
|
74
74
|
<div>
|
|
75
75
|
<MultiLevelSelect
|
|
76
|
-
id=
|
|
76
|
+
id="select_a_department"
|
|
77
77
|
label="Select a Department"
|
|
78
78
|
onSelect={(selectedNodes) =>
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
selectedNodes
|
|
82
|
-
)
|
|
83
|
-
}
|
|
79
|
+
console.log("Selected Items", selectedNodes)
|
|
80
|
+
}
|
|
84
81
|
treeData={treeData}
|
|
85
82
|
{...props}
|
|
86
83
|
/>
|
|
@@ -88,4 +85,4 @@ const MultiLevelSelectDefault = (props) => {
|
|
|
88
85
|
)
|
|
89
86
|
};
|
|
90
87
|
|
|
91
|
-
export default MultiLevelSelectDefault;
|
|
88
|
+
export default MultiLevelSelectDefault;
|
|
@@ -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'
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
<%
|
|
2
|
+
options = [
|
|
3
|
+
{ label: 'Orange', value: '#FFA500' },
|
|
4
|
+
{ label: 'Red', value: '#FF0000' },
|
|
5
|
+
{ label: 'Green', value: '#00FF00' },
|
|
6
|
+
{ label: 'Blue', value: '#0000FF' },
|
|
7
|
+
]
|
|
8
|
+
%>
|
|
9
|
+
|
|
10
|
+
<%= pb_rails("typeahead", props: {
|
|
11
|
+
id: "typeahead-required-indicator",
|
|
12
|
+
is_multi: false,
|
|
13
|
+
label: "Colors",
|
|
14
|
+
options: options,
|
|
15
|
+
required_indicator: true,
|
|
16
|
+
}) %>
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import React from "react"
|
|
2
|
+
import Typeahead from "../../pb_typeahead/_typeahead"
|
|
3
|
+
|
|
4
|
+
const options = [
|
|
5
|
+
{label: "Orange", value: "#FFA500"},
|
|
6
|
+
{label: "Red", value: "#FF0000"},
|
|
7
|
+
{label: "Green", value: "#00FF00"},
|
|
8
|
+
{label: "Blue", value: "#0000FF"},
|
|
9
|
+
]
|
|
10
|
+
|
|
11
|
+
const TypeaheadRequiredIndicator = (props) => {
|
|
12
|
+
return (
|
|
13
|
+
<Typeahead
|
|
14
|
+
id="typeahead_required_indicator"
|
|
15
|
+
label="Colors"
|
|
16
|
+
options={options}
|
|
17
|
+
requiredIndicator
|
|
18
|
+
{...props}
|
|
19
|
+
/>
|
|
20
|
+
)
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
export default TypeaheadRequiredIndicator
|
|
@@ -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.
|
|
@@ -19,6 +19,7 @@ examples:
|
|
|
19
19
|
- typeahead_dynamic_options_pure_rails: Dynamic Options (Pure Rails)
|
|
20
20
|
- typeahead_disabled: Disabled
|
|
21
21
|
- typeahead_preserve_input: Preserve Search Input
|
|
22
|
+
- typeahead_required_indicator: Required Indicator
|
|
22
23
|
|
|
23
24
|
react:
|
|
24
25
|
- typeahead_default: Default
|
|
@@ -42,3 +43,4 @@ examples:
|
|
|
42
43
|
- typeahead_truncated_text: Truncated Text
|
|
43
44
|
- typeahead_disabled: Disabled
|
|
44
45
|
- typeahead_preserve_input: Preserve Search Input
|
|
46
|
+
- typeahead_required_indicator: Required Indicator
|
|
@@ -1,21 +1,22 @@
|
|
|
1
|
-
export {
|
|
2
|
-
export {
|
|
3
|
-
export {
|
|
4
|
-
export {
|
|
5
|
-
export {
|
|
6
|
-
export {
|
|
7
|
-
export {
|
|
8
|
-
export {
|
|
9
|
-
export {
|
|
10
|
-
export {
|
|
11
|
-
export {
|
|
12
|
-
export {
|
|
13
|
-
export {
|
|
14
|
-
export {
|
|
15
|
-
export {
|
|
16
|
-
export {
|
|
17
|
-
export {
|
|
18
|
-
export {
|
|
19
|
-
export {
|
|
20
|
-
export {
|
|
21
|
-
export {
|
|
1
|
+
export {default as TypeaheadDefault} from "./_typeahead_default.jsx"
|
|
2
|
+
export {default as TypeaheadWithHighlight} from "./_typeahead_with_highlight.jsx"
|
|
3
|
+
export {default as TypeaheadWithPills} from "./_typeahead_with_pills.jsx"
|
|
4
|
+
export {default as TypeaheadWithPillsAsync} from "./_typeahead_with_pills_async.jsx"
|
|
5
|
+
export {default as TypeaheadWithPillsAsyncUsers} from "./_typeahead_with_pills_async_users.jsx"
|
|
6
|
+
export {default as TypeaheadWithPillsAsyncCustomOptions} from "./_typeahead_with_pills_async_custom_options.jsx"
|
|
7
|
+
export {default as TypeaheadInline} from "./_typeahead_inline.jsx"
|
|
8
|
+
export {default as TypeaheadMultiKit} from "./_typeahead_multi_kit.jsx"
|
|
9
|
+
export {default as TypeaheadCreateable} from "./_typeahead_createable.jsx"
|
|
10
|
+
export {default as TypeaheadAsyncCreateable} from "./_typeahead_async_createable.jsx"
|
|
11
|
+
export {default as TypeaheadErrorState} from "./_typeahead_error_state.jsx"
|
|
12
|
+
export {default as TypeaheadCustomMenuList} from "./_typeahead_custom_menu_list.jsx"
|
|
13
|
+
export {default as TypeaheadMarginBottom} from "./_typeahead_margin_bottom.jsx"
|
|
14
|
+
export {default as TypeaheadWithPillsColor} from "./_typeahead_with_pills_color.jsx"
|
|
15
|
+
export {default as TypeaheadTruncatedText} from "./_typeahead_truncated_text.jsx"
|
|
16
|
+
export {default as TypeaheadReactHook} from "./_typeahead_react_hook.jsx"
|
|
17
|
+
export {default as TypeaheadDisabled} from "./_typeahead_disabled.jsx"
|
|
18
|
+
export {default as TypeaheadPreserveInput} from "./_typeahead_preserve_input.jsx"
|
|
19
|
+
export {default as TypeaheadDefaultValue} from "./_typeahead_default_value.jsx"
|
|
20
|
+
export {default as TypeaheadCustomOptions} from "./_typeahead_custom_options.jsx"
|
|
21
|
+
export {default as TypeaheadInputDisplay} from "./_typeahead_input_display.jsx"
|
|
22
|
+
export {default as TypeaheadRequiredIndicator} from "./_typeahead_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.2.0.pre.rc.
|
|
4
|
+
version: 16.2.0.pre.rc.2
|
|
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-
|
|
12
|
+
date: 2026-02-03 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: playbook_ui
|
|
@@ -64,6 +64,8 @@ files:
|
|
|
64
64
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.md
|
|
65
65
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background.jsx
|
|
66
66
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background.md
|
|
67
|
+
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background_custom.jsx
|
|
68
|
+
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background_custom.md
|
|
67
69
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background_multi.jsx
|
|
68
70
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background_multi.md
|
|
69
71
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers.jsx
|
|
@@ -419,6 +421,9 @@ files:
|
|
|
419
421
|
- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_props_swift.md
|
|
420
422
|
- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.jsx
|
|
421
423
|
- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.md
|
|
424
|
+
- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_required_indicator.html.erb
|
|
425
|
+
- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_required_indicator.jsx
|
|
426
|
+
- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_required_indicator.md
|
|
422
427
|
- app/pb_kits/playbook/pb_checkbox/docs/_description.md
|
|
423
428
|
- app/pb_kits/playbook/pb_checkbox/docs/example.yml
|
|
424
429
|
- app/pb_kits/playbook/pb_checkbox/docs/index.js
|
|
@@ -576,6 +581,7 @@ files:
|
|
|
576
581
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_anti_patterns.html.erb
|
|
577
582
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.html.erb
|
|
578
583
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.jsx
|
|
584
|
+
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.md
|
|
579
585
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb
|
|
580
586
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx
|
|
581
587
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md
|
|
@@ -1428,6 +1434,7 @@ files:
|
|
|
1428
1434
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_input_display.md
|
|
1429
1435
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.html.erb
|
|
1430
1436
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.jsx
|
|
1437
|
+
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.md
|
|
1431
1438
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.jsx
|
|
1432
1439
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.md
|
|
1433
1440
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb
|
|
@@ -1929,6 +1936,8 @@ files:
|
|
|
1929
1936
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_height.md
|
|
1930
1937
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_inline.jsx
|
|
1931
1938
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_inline.md
|
|
1939
|
+
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_label.jsx
|
|
1940
|
+
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_label.md
|
|
1932
1941
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_min_height.jsx
|
|
1933
1942
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_min_height.md
|
|
1934
1943
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_preview.jsx
|
|
@@ -1947,6 +1956,8 @@ files:
|
|
|
1947
1956
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_focus.jsx
|
|
1948
1957
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.html.erb
|
|
1949
1958
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.jsx
|
|
1959
|
+
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_label.jsx
|
|
1960
|
+
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_label.md
|
|
1950
1961
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.jsx
|
|
1951
1962
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.md
|
|
1952
1963
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb
|
|
@@ -2343,6 +2354,7 @@ files:
|
|
|
2343
2354
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_custom.jsx
|
|
2344
2355
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_default.html.erb
|
|
2345
2356
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_default.jsx
|
|
2357
|
+
- app/pb_kits/playbook/pb_textarea/docs/_textarea_default.md
|
|
2346
2358
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_default_swift.md
|
|
2347
2359
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_emoji_mask.html.erb
|
|
2348
2360
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_emoji_mask.jsx
|
|
@@ -2403,6 +2415,9 @@ files:
|
|
|
2403
2415
|
- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_min_max_time.md
|
|
2404
2416
|
- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_on_handler.jsx
|
|
2405
2417
|
- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_on_handler.md
|
|
2418
|
+
- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.html.erb
|
|
2419
|
+
- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.jsx
|
|
2420
|
+
- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.md
|
|
2406
2421
|
- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_timezone.html.erb
|
|
2407
2422
|
- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_timezone.jsx
|
|
2408
2423
|
- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_timezone.md
|
|
@@ -2606,6 +2621,9 @@ files:
|
|
|
2606
2621
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input_react.md
|
|
2607
2622
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.jsx
|
|
2608
2623
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.md
|
|
2624
|
+
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_required_indicator.html.erb
|
|
2625
|
+
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_required_indicator.jsx
|
|
2626
|
+
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_required_indicator.md
|
|
2609
2627
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.html.erb
|
|
2610
2628
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.jsx
|
|
2611
2629
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.md
|