playbook_ui_docs 16.1.0.pre.alpha.play2712navkitadddisabledstatecollapsible14075 → 16.1.0.pre.alpha.play2724typeaheadindicator13970
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_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 +0 -1
- 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_nav/docs/example.yml +6 -2
- data/app/pb_kits/playbook/pb_nav/docs/index.js +1 -2
- 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
- metadata +2 -14
- 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_nav/docs/_collapsible_nav_disabled_item.html.erb +0 -24
- data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_disabled_item.jsx +0 -87
- 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
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: f2244321e6df53f534ad1394dcaa7de6fe6852fed34b8ac66828789edfa3eea8
|
|
4
|
+
data.tar.gz: bde52fc6f901cab38d117de1cf6acb4511ce5842c7b601a316b759cffdc029cf
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 18ed1b23c502a71de038ffd826f99f0f997d20c742c3edfcf2e2d7d00e5c24a48bed6c585da38a72cb32a1bb050864e9bfbff188fe4be90e49010e2b47705aee
|
|
7
|
+
data.tar.gz: 12c47bdabe77b9be9ae0c068c23c095e8bea3d4058923840978ed561c0ef0927d76c2ce0b72600d6ec58704c0046aba787fd435610d2758577113ed837bcf10f
|
|
@@ -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.
|
|
@@ -11,7 +11,6 @@
|
|
|
11
11
|
<%= form.text_area :example_text_area, props: { label: true, required: true, required_indicator: true } %>
|
|
12
12
|
<%= form.text_area :example_text_area_2, props: { label: "Textarea Custom Label", required: true, required_indicator: true } %>
|
|
13
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 } %>
|
|
15
14
|
|
|
16
15
|
<%= form.actions do |action| %>
|
|
17
16
|
<%= 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;
|
|
@@ -14,7 +14,6 @@ examples:
|
|
|
14
14
|
- collapsible_nav: Collapsible Nav
|
|
15
15
|
- collapsible_nav_with_all_options: Collapsible Nav With Options
|
|
16
16
|
- collapsible_nav_no_icon: Collapsible Nav No Icon
|
|
17
|
-
- collapsible_nav_disabled_item: Collapsible Nav With Disabled Item
|
|
18
17
|
- horizontal_nav: Horizontal Nav
|
|
19
18
|
- subtle_horizontal_nav: Subtle Horizontal Nav
|
|
20
19
|
- bold_horizontal_nav: Bold Horizontal Nav
|
|
@@ -43,7 +42,6 @@ examples:
|
|
|
43
42
|
- collapsible_nav_item_spacing: Collapsible Nav With ItemSpacing
|
|
44
43
|
- collapsible_nav_custom: Collapsible Nav With Custom Toggling
|
|
45
44
|
- collapsible_nav_no_icon: Collapsible Nav No Icon
|
|
46
|
-
- collapsible_nav_disabled_item: Collapsible Nav With Disabled Item
|
|
47
45
|
- horizontal_nav: Horizontal Nav
|
|
48
46
|
- subtle_horizontal_nav: Subtle Horizontal Nav
|
|
49
47
|
- bold_horizontal_nav: Bold Horizontal Nav
|
|
@@ -64,3 +62,9 @@ examples:
|
|
|
64
62
|
- nav_horizontal_subtle_no_highlight_swift: Horizontal Subtle No Highlight
|
|
65
63
|
- nav_horizontal_bold_swift: Horizontal Bold
|
|
66
64
|
- nav_props_swift: ""
|
|
65
|
+
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
|
|
@@ -22,5 +22,4 @@ export { default as CollapsibleNavItemSpacing } from "./_collapsible_nav_item_sp
|
|
|
22
22
|
export { default as CollapsibleNavNoIcon } from "./_collapsible_nav_no_icon.jsx"
|
|
23
23
|
export { default as HorizontalNavExtendedunderline } from './_horizontal_nav_extendedunderline.jsx'
|
|
24
24
|
export { default as HorizontalNavDisabled } from './_horizontal_nav_disabled.jsx'
|
|
25
|
-
export { default as VerticalNavDisabled } from './_vertical_nav_disabled.jsx'
|
|
26
|
-
export { default as CollapsibleNavDisabledItem } from './_collapsible_nav_disabled_item.jsx'
|
|
25
|
+
export { default as VerticalNavDisabled } from './_vertical_nav_disabled.jsx'
|
|
@@ -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'
|
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.play2724typeaheadindicator13970
|
|
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
|
|
@@ -579,7 +579,6 @@ files:
|
|
|
579
579
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_anti_patterns.html.erb
|
|
580
580
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.html.erb
|
|
581
581
|
- 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
582
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb
|
|
584
583
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx
|
|
585
584
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md
|
|
@@ -1432,7 +1431,6 @@ files:
|
|
|
1432
1431
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_input_display.md
|
|
1433
1432
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.html.erb
|
|
1434
1433
|
- 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
1434
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.jsx
|
|
1437
1435
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.md
|
|
1438
1436
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb
|
|
@@ -1508,8 +1506,6 @@ files:
|
|
|
1508
1506
|
- app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.md
|
|
1509
1507
|
- app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.jsx
|
|
1510
1508
|
- app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.md
|
|
1511
|
-
- app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_disabled_item.html.erb
|
|
1512
|
-
- app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_disabled_item.jsx
|
|
1513
1509
|
- app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_item_spacing.jsx
|
|
1514
1510
|
- app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_item_spacing.md
|
|
1515
1511
|
- app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_no_icon.html.erb
|
|
@@ -1936,8 +1932,6 @@ files:
|
|
|
1936
1932
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_height.md
|
|
1937
1933
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_inline.jsx
|
|
1938
1934
|
- 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
|
|
1941
1935
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_min_height.jsx
|
|
1942
1936
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_min_height.md
|
|
1943
1937
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_preview.jsx
|
|
@@ -1956,8 +1950,6 @@ files:
|
|
|
1956
1950
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_focus.jsx
|
|
1957
1951
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.html.erb
|
|
1958
1952
|
- 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
|
|
1961
1953
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.jsx
|
|
1962
1954
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.md
|
|
1963
1955
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb
|
|
@@ -2354,7 +2346,6 @@ files:
|
|
|
2354
2346
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_custom.jsx
|
|
2355
2347
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_default.html.erb
|
|
2356
2348
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_default.jsx
|
|
2357
|
-
- app/pb_kits/playbook/pb_textarea/docs/_textarea_default.md
|
|
2358
2349
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_default_swift.md
|
|
2359
2350
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_emoji_mask.html.erb
|
|
2360
2351
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_emoji_mask.jsx
|
|
@@ -2415,9 +2406,6 @@ files:
|
|
|
2415
2406
|
- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_min_max_time.md
|
|
2416
2407
|
- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_on_handler.jsx
|
|
2417
2408
|
- 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
|
|
2421
2409
|
- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_timezone.html.erb
|
|
2422
2410
|
- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_timezone.jsx
|
|
2423
2411
|
- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_timezone.md
|
|
@@ -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,24 +0,0 @@
|
|
|
1
|
-
<%= pb_rails("nav", props: { variant: "bold" }) do %>
|
|
2
|
-
<%= pb_rails("nav/item", props: { text: "Overview", link: "#", collapsible: true, icon_left:"city", disabled: true }) do %>
|
|
3
|
-
<%= pb_rails("nav", props: { variant: "bold" }) do %>
|
|
4
|
-
<%= pb_rails("nav/item", props: { text: "City", link: "#" }) %>
|
|
5
|
-
<%= pb_rails("nav/item", props: { text: "People", link: "#" }) %>
|
|
6
|
-
<%= pb_rails("nav/item", props: { text: "Business", link: "#" }) %>
|
|
7
|
-
<% end %>
|
|
8
|
-
<% end %>
|
|
9
|
-
<%= pb_rails("nav/item", props: { text: "Albums", link: "#", active: true, collapsible: true, icon_left: "theater-masks" }) do %>
|
|
10
|
-
<%= pb_rails("nav", props: { variant: "bold" }) do %>
|
|
11
|
-
<%= pb_rails("nav/item", props: { text: "Entertainment", link: "#" }) %>
|
|
12
|
-
<%= pb_rails("nav/item", props: { text: "Food", link: "#" }) %>
|
|
13
|
-
<%= pb_rails("nav/item", props: { text: "Style", link: "#" }) %>
|
|
14
|
-
<% end %>
|
|
15
|
-
<% end %>
|
|
16
|
-
<%= pb_rails("nav/item", props: { text: "Similar Artists", link: "#", collapsible: true, icon_left: "city" }) do %>
|
|
17
|
-
<%= pb_rails("nav", props: { variant: "bold" }) do %>
|
|
18
|
-
<%= pb_rails("nav/item", props: { text: "City", link: "#", disabled: true }) %>
|
|
19
|
-
<%= pb_rails("nav/item", props: { text: "People", link: "#" }) %>
|
|
20
|
-
<%= pb_rails("nav/item", props: { text: "Business", link: "#" }) %>
|
|
21
|
-
<% end %>
|
|
22
|
-
<% end %>
|
|
23
|
-
<% end %>
|
|
24
|
-
|
|
@@ -1,87 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import Nav from '../../pb_nav/_nav'
|
|
3
|
-
import NavItem from '../../pb_nav/_item'
|
|
4
|
-
|
|
5
|
-
const CollapsibleNavDisabledItem = (props) => {
|
|
6
|
-
return (
|
|
7
|
-
<Nav
|
|
8
|
-
variant="bold"
|
|
9
|
-
{...props}
|
|
10
|
-
>
|
|
11
|
-
<NavItem
|
|
12
|
-
collapsed={false}
|
|
13
|
-
collapsible
|
|
14
|
-
disabled
|
|
15
|
-
iconLeft="city"
|
|
16
|
-
link="#"
|
|
17
|
-
text="Overview"
|
|
18
|
-
{...props}
|
|
19
|
-
>
|
|
20
|
-
<NavItem
|
|
21
|
-
link="#"
|
|
22
|
-
text="City"
|
|
23
|
-
{...props}
|
|
24
|
-
/>
|
|
25
|
-
<NavItem
|
|
26
|
-
link="#"
|
|
27
|
-
text="People"
|
|
28
|
-
{...props}
|
|
29
|
-
/>
|
|
30
|
-
<NavItem
|
|
31
|
-
link="#"
|
|
32
|
-
text="Business"
|
|
33
|
-
{...props}
|
|
34
|
-
/>
|
|
35
|
-
</NavItem>
|
|
36
|
-
<NavItem
|
|
37
|
-
collapsible
|
|
38
|
-
iconLeft="theater-masks"
|
|
39
|
-
link="#"
|
|
40
|
-
text="Albums"
|
|
41
|
-
{...props}
|
|
42
|
-
>
|
|
43
|
-
<NavItem
|
|
44
|
-
disabled
|
|
45
|
-
link="#"
|
|
46
|
-
text="Entertainment"
|
|
47
|
-
{...props}
|
|
48
|
-
/>
|
|
49
|
-
<NavItem
|
|
50
|
-
link="#"
|
|
51
|
-
text="Food"
|
|
52
|
-
{...props}
|
|
53
|
-
/>
|
|
54
|
-
<NavItem
|
|
55
|
-
link="#"
|
|
56
|
-
text="Style"
|
|
57
|
-
{...props}
|
|
58
|
-
/>
|
|
59
|
-
</NavItem>
|
|
60
|
-
<NavItem
|
|
61
|
-
collapsible
|
|
62
|
-
iconLeft="city"
|
|
63
|
-
link="#"
|
|
64
|
-
text="Similar Artists"
|
|
65
|
-
{...props}
|
|
66
|
-
>
|
|
67
|
-
<NavItem
|
|
68
|
-
link="#"
|
|
69
|
-
text="City"
|
|
70
|
-
{...props}
|
|
71
|
-
/>
|
|
72
|
-
<NavItem
|
|
73
|
-
link="#"
|
|
74
|
-
text="People"
|
|
75
|
-
{...props}
|
|
76
|
-
/>
|
|
77
|
-
<NavItem
|
|
78
|
-
link="#"
|
|
79
|
-
text="Business"
|
|
80
|
-
{...props}
|
|
81
|
-
/>
|
|
82
|
-
</NavItem>
|
|
83
|
-
</Nav>
|
|
84
|
-
);
|
|
85
|
-
};
|
|
86
|
-
|
|
87
|
-
export default CollapsibleNavDisabledItem
|
|
@@ -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.
|