playbook_ui_docs 16.1.0.pre.alpha.PLAY2717typeaheadinputdisplaynoneupdatelogic14074 → 16.1.0.pre.alpha.PLAY2721railstablestickycolumnnulloffsetwidth13980
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_checkbox/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_checkbox/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb +3 -6
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx +0 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.md +1 -3
- data/app/pb_kits/playbook/pb_form/docs/_form_with_required_indicator.html.erb +3 -6
- 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 +7 -4
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_required_indicator.jsx +0 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.jsx +0 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js +0 -2
- 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 +0 -3
- data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_on_handler.jsx +2 -5
- data/app/pb_kits/playbook/pb_time_picker/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_time_picker/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_typeahead/docs/index.js +21 -22
- metadata +2 -18
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_required_indicator.html.erb +0 -6
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_required_indicator.jsx +0 -17
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_required_indicator.md +0 -3
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.md +0 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.md +0 -3
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_label.jsx +0 -44
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_label.md +0 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_label.jsx +0 -28
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_label.md +0 -1
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_default.md +0 -1
- data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.html.erb +0 -6
- data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.jsx +0 -16
- data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.md +0 -3
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_required_indicator.html.erb +0 -16
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_required_indicator.jsx +0 -23
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_required_indicator.md +0 -3
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: b9be286377e3436517ad1b266509375d99c150b6e904169e8f956028cf47e7b1
|
|
4
|
+
data.tar.gz: 36e8984bda0ab557bfbbf36ecb869c0a60cf6b065c9e2b8c1c1bf7b56ab3160e
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: c6628b936763806795e56fc2524be1058454ff4e1617270a291863b659bd7458e611092dc9a9c0f5507057359be475a8c4d542cdf204227dec0fb380c5e6d18f
|
|
7
|
+
data.tar.gz: f6ac1ca0251884f92f44f75535c10c77441d936be0b58fc991d8ea9d0df23a9e579fdaf51551a57034aa74d2304fdc0dc8b1221793d009148c7d660d84bff8b6
|
|
@@ -8,7 +8,6 @@ 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
|
|
12
11
|
|
|
13
12
|
react:
|
|
14
13
|
- checkbox_default: Default
|
|
@@ -18,7 +17,6 @@ examples:
|
|
|
18
17
|
- checkbox_error: Default w/ Error
|
|
19
18
|
- checkbox_indeterminate: Indeterminate Checkbox
|
|
20
19
|
- checkbox_disabled: Disabled Checkbox
|
|
21
|
-
# - checkbox_required_indicator: Required Indicator
|
|
22
20
|
|
|
23
21
|
swift:
|
|
24
22
|
- checkbox_default_swift: Default
|
|
@@ -5,4 +5,3 @@ 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'
|
|
@@ -1,13 +1,10 @@
|
|
|
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
|
+
|
|
7
8
|
%>
|
|
8
9
|
|
|
9
|
-
<%= pb_rails("dropdown", props: {
|
|
10
|
-
id: "select_a_country",
|
|
11
|
-
label: "Select a Country",
|
|
12
|
-
options: options
|
|
13
|
-
}) %>
|
|
10
|
+
<%= pb_rails("dropdown", props: {options: options, label: "Select a Country"}) %>
|
|
@@ -1,3 +1 @@
|
|
|
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
|
+
The top-level Dropdown component optionally accepts any string through a `label` prop to produce a label above your trigger element.
|
|
@@ -1,17 +1,14 @@
|
|
|
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 } %>
|
|
3
2
|
<%= form.text_field :example_text_field, props: { label: true, required: true, required_indicator: true } %>
|
|
4
3
|
<%= form.text_field :example_text_field_2, props: { label: "Text Field Custom Label", required: true, required_indicator: true } %>
|
|
5
|
-
<%= form.
|
|
4
|
+
<%= form.text_area :example_text_area, props: { label: true, required: true, required_indicator: true } %>
|
|
5
|
+
<%= form.text_area :example_text_area_2, props: { label: "Textarea Custom Label", 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.
|
|
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 } %>
|
|
11
|
+
<%= form.phone_number_field :example_phone_number_field, props: { label: true, required: true, required_indicator: true } %>
|
|
15
12
|
|
|
16
13
|
<%= form.actions do |action| %>
|
|
17
14
|
<%= action.submit %>
|
|
@@ -73,11 +73,14 @@ const MultiLevelSelectDefault = (props) => {
|
|
|
73
73
|
return (
|
|
74
74
|
<div>
|
|
75
75
|
<MultiLevelSelect
|
|
76
|
-
id=
|
|
76
|
+
id='multiselect-label'
|
|
77
77
|
label="Select a Department"
|
|
78
78
|
onSelect={(selectedNodes) =>
|
|
79
|
-
|
|
80
|
-
|
|
79
|
+
console.log(
|
|
80
|
+
"Selected Items",
|
|
81
|
+
selectedNodes
|
|
82
|
+
)
|
|
83
|
+
}
|
|
81
84
|
treeData={treeData}
|
|
82
85
|
{...props}
|
|
83
86
|
/>
|
|
@@ -85,4 +88,4 @@ const MultiLevelSelectDefault = (props) => {
|
|
|
85
88
|
)
|
|
86
89
|
};
|
|
87
90
|
|
|
88
|
-
export default MultiLevelSelectDefault;
|
|
91
|
+
export default MultiLevelSelectDefault;
|
|
@@ -32,8 +32,6 @@ 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)
|
|
37
35
|
- rich_text_editor_required_indicator: Required Indicator
|
|
38
36
|
- rich_text_editor_advanced_required_indicator: Advanced Required Indicator
|
|
39
37
|
- rich_text_editor_preview: Preview
|
|
@@ -21,5 +21,3 @@ 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}) %>
|
|
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" }) %>
|
|
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" }) %>
|
|
@@ -13,7 +13,6 @@ const TextareaDefault = (props) => {
|
|
|
13
13
|
label="Label"
|
|
14
14
|
rows={4}
|
|
15
15
|
{...props}
|
|
16
|
-
id="default-example-1"
|
|
17
16
|
/>
|
|
18
17
|
|
|
19
18
|
<br />
|
|
@@ -22,7 +21,6 @@ const TextareaDefault = (props) => {
|
|
|
22
21
|
label="Label"
|
|
23
22
|
placeholder="Placeholder text"
|
|
24
23
|
{...props}
|
|
25
|
-
id="default-example-2"
|
|
26
24
|
/>
|
|
27
25
|
|
|
28
26
|
<br />
|
|
@@ -34,7 +32,6 @@ const TextareaDefault = (props) => {
|
|
|
34
32
|
placeholder="Placeholder text"
|
|
35
33
|
value={value}
|
|
36
34
|
{...props}
|
|
37
|
-
id="default-example-3"
|
|
38
35
|
/>
|
|
39
36
|
|
|
40
37
|
</div>
|
|
@@ -1,7 +1,6 @@
|
|
|
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'
|
|
5
4
|
|
|
6
5
|
const TimePickerOnHandler = (props) => {
|
|
7
6
|
const [selectedTime, setSelectedTime] = useState('')
|
|
@@ -18,9 +17,7 @@ const TimePickerOnHandler = (props) => {
|
|
|
18
17
|
return (
|
|
19
18
|
<div>
|
|
20
19
|
{(selectedTime || closedTime) && (
|
|
21
|
-
<
|
|
22
|
-
orientation="column"
|
|
23
|
-
>
|
|
20
|
+
<div style={{ marginBottom: '16px' }}>
|
|
24
21
|
{selectedTime && (
|
|
25
22
|
<Body
|
|
26
23
|
text={`onChange: ${selectedTime}`}
|
|
@@ -32,7 +29,7 @@ const TimePickerOnHandler = (props) => {
|
|
|
32
29
|
text={`onClose: ${closedTime}`}
|
|
33
30
|
/>
|
|
34
31
|
)}
|
|
35
|
-
</
|
|
32
|
+
</div>
|
|
36
33
|
)}
|
|
37
34
|
<TimePicker
|
|
38
35
|
id="time-picker-on-handler"
|
|
@@ -9,7 +9,6 @@ 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
|
|
13
12
|
- time_picker_input_options: Input Options
|
|
14
13
|
|
|
15
14
|
|
|
@@ -22,5 +21,4 @@ examples:
|
|
|
22
21
|
- time_picker_min_max_time: Min & Max Time
|
|
23
22
|
- time_picker_error: Error
|
|
24
23
|
- time_picker_disabled: Disabled
|
|
25
|
-
- time_picker_required_indicator: Required Indicator
|
|
26
24
|
- time_picker_on_handler: onChange & onClose Handlers
|
|
@@ -7,4 +7,3 @@ 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'
|
|
@@ -19,7 +19,6 @@ 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
|
|
23
22
|
|
|
24
23
|
react:
|
|
25
24
|
- typeahead_default: Default
|
|
@@ -43,4 +42,3 @@ examples:
|
|
|
43
42
|
- typeahead_truncated_text: Truncated Text
|
|
44
43
|
- typeahead_disabled: Disabled
|
|
45
44
|
- typeahead_preserve_input: Preserve Search Input
|
|
46
|
-
- typeahead_required_indicator: Required Indicator
|
|
@@ -1,22 +1,21 @@
|
|
|
1
|
-
export {default as TypeaheadDefault} from
|
|
2
|
-
export {default as TypeaheadWithHighlight} from
|
|
3
|
-
export {default as TypeaheadWithPills} from
|
|
4
|
-
export {default as TypeaheadWithPillsAsync} from
|
|
5
|
-
export {default as TypeaheadWithPillsAsyncUsers} from
|
|
6
|
-
export {default as TypeaheadWithPillsAsyncCustomOptions} from
|
|
7
|
-
export {default as TypeaheadInline} from
|
|
8
|
-
export {default as TypeaheadMultiKit} from
|
|
9
|
-
export {default as TypeaheadCreateable} from
|
|
10
|
-
export {default as TypeaheadAsyncCreateable} from
|
|
11
|
-
export {default as TypeaheadErrorState} from
|
|
12
|
-
export {default as TypeaheadCustomMenuList} from
|
|
13
|
-
export {default as TypeaheadMarginBottom} from
|
|
14
|
-
export {default as TypeaheadWithPillsColor} from
|
|
15
|
-
export {default as TypeaheadTruncatedText} from
|
|
16
|
-
export {default as TypeaheadReactHook} from
|
|
17
|
-
export {default as TypeaheadDisabled} from
|
|
18
|
-
export {default as TypeaheadPreserveInput} from
|
|
19
|
-
export {default as TypeaheadDefaultValue} from
|
|
20
|
-
export {default as TypeaheadCustomOptions} from
|
|
21
|
-
export {default as TypeaheadInputDisplay} from
|
|
22
|
-
export {default as TypeaheadRequiredIndicator} from "./_typeahead_required_indicator.jsx"
|
|
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'
|
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.PLAY2721railstablestickycolumnnulloffsetwidth13980
|
|
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-01-29 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: playbook_ui
|
|
@@ -419,9 +419,6 @@ files:
|
|
|
419
419
|
- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_props_swift.md
|
|
420
420
|
- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.jsx
|
|
421
421
|
- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.md
|
|
422
|
-
- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_required_indicator.html.erb
|
|
423
|
-
- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_required_indicator.jsx
|
|
424
|
-
- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_required_indicator.md
|
|
425
422
|
- app/pb_kits/playbook/pb_checkbox/docs/_description.md
|
|
426
423
|
- app/pb_kits/playbook/pb_checkbox/docs/example.yml
|
|
427
424
|
- app/pb_kits/playbook/pb_checkbox/docs/index.js
|
|
@@ -579,7 +576,6 @@ files:
|
|
|
579
576
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_anti_patterns.html.erb
|
|
580
577
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.html.erb
|
|
581
578
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.jsx
|
|
582
|
-
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.md
|
|
583
579
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb
|
|
584
580
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx
|
|
585
581
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md
|
|
@@ -1432,7 +1428,6 @@ files:
|
|
|
1432
1428
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_input_display.md
|
|
1433
1429
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.html.erb
|
|
1434
1430
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.jsx
|
|
1435
|
-
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.md
|
|
1436
1431
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.jsx
|
|
1437
1432
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.md
|
|
1438
1433
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb
|
|
@@ -1934,8 +1929,6 @@ files:
|
|
|
1934
1929
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_height.md
|
|
1935
1930
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_inline.jsx
|
|
1936
1931
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_inline.md
|
|
1937
|
-
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_label.jsx
|
|
1938
|
-
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_label.md
|
|
1939
1932
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_min_height.jsx
|
|
1940
1933
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_min_height.md
|
|
1941
1934
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_preview.jsx
|
|
@@ -1954,8 +1947,6 @@ files:
|
|
|
1954
1947
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_focus.jsx
|
|
1955
1948
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.html.erb
|
|
1956
1949
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.jsx
|
|
1957
|
-
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_label.jsx
|
|
1958
|
-
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_label.md
|
|
1959
1950
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.jsx
|
|
1960
1951
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.md
|
|
1961
1952
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb
|
|
@@ -2352,7 +2343,6 @@ files:
|
|
|
2352
2343
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_custom.jsx
|
|
2353
2344
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_default.html.erb
|
|
2354
2345
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_default.jsx
|
|
2355
|
-
- app/pb_kits/playbook/pb_textarea/docs/_textarea_default.md
|
|
2356
2346
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_default_swift.md
|
|
2357
2347
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_emoji_mask.html.erb
|
|
2358
2348
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_emoji_mask.jsx
|
|
@@ -2413,9 +2403,6 @@ files:
|
|
|
2413
2403
|
- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_min_max_time.md
|
|
2414
2404
|
- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_on_handler.jsx
|
|
2415
2405
|
- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_on_handler.md
|
|
2416
|
-
- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.html.erb
|
|
2417
|
-
- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.jsx
|
|
2418
|
-
- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.md
|
|
2419
2406
|
- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_timezone.html.erb
|
|
2420
2407
|
- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_timezone.jsx
|
|
2421
2408
|
- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_timezone.md
|
|
@@ -2619,9 +2606,6 @@ files:
|
|
|
2619
2606
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input_react.md
|
|
2620
2607
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.jsx
|
|
2621
2608
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.md
|
|
2622
|
-
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_required_indicator.html.erb
|
|
2623
|
-
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_required_indicator.jsx
|
|
2624
|
-
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_required_indicator.md
|
|
2625
2609
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.html.erb
|
|
2626
2610
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.jsx
|
|
2627
2611
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.md
|
|
@@ -1,17 +0,0 @@
|
|
|
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
|
|
@@ -1,3 +0,0 @@
|
|
|
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.
|
|
@@ -1 +0,0 @@
|
|
|
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,44 +0,0 @@
|
|
|
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
|
|
@@ -1 +0,0 @@
|
|
|
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.
|
|
@@ -1,28 +0,0 @@
|
|
|
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
|
|
@@ -1 +0,0 @@
|
|
|
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.
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
Add an `id` to your Textarea so that clicking the label will move focus directly to the input.
|
|
@@ -1,16 +0,0 @@
|
|
|
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
|
-
|
|
@@ -1,3 +0,0 @@
|
|
|
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.
|
|
@@ -1,16 +0,0 @@
|
|
|
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
|
-
}) %>
|
|
@@ -1,23 +0,0 @@
|
|
|
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
|
|
@@ -1,3 +0,0 @@
|
|
|
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.
|