playbook_ui_docs 15.7.0.pre.alpha.PLAY2675dropdownquickpickcustomquickpickdates13330 → 15.7.0.pre.alpha.PLAY2704multilevelselectsingledisabledoptions13404
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/example.yml +0 -2
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +1 -2
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options.md +1 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_disabled.html.erb +135 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_disabled.jsx +147 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_disabled.md +1 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_emoji_mask.html.erb +7 -0
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_emoji_mask.jsx +24 -0
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_emoji_mask.md +2 -0
- data/app/pb_kits/playbook/pb_text_input/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_text_input/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_emoji_mask.html.erb +5 -0
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_emoji_mask.jsx +24 -0
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_emoji_mask.md +1 -0
- data/app/pb_kits/playbook/pb_textarea/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_textarea/docs/index.js +1 -0
- metadata +11 -6
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_custom.jsx +0 -56
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_custom.md +0 -10
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_custom_rails.html.erb +0 -64
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_custom_rails.md +0 -10
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: b5ce26e398a06da1f730f37708e94a96969057b3a20267d0c3596e634f447cbf
|
|
4
|
+
data.tar.gz: 2880e92ee4e07f458cc14ad835021adaf2ac47bb1d4e4e0f9f23720c9855f4cc
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 28548a312790dec3514df63fd8892421d8a09a156e0e4b6aafa876db5cf0053be3d5af87e9866b17f94205b543358538170db1abf334a2a1234958f8ff89b340
|
|
7
|
+
data.tar.gz: f703c34a40a9daa77e21dc386ac01f26aae84e50f74992e11ac355a9f307a3816eeea02557397b59d5a5b1c0889e30198a8d397dd533925590ab0be2b5b219f1
|
|
@@ -25,7 +25,6 @@ examples:
|
|
|
25
25
|
- dropdown_quickpick_rails: Quick Pick Variant
|
|
26
26
|
- dropdown_quickpick_range_end_rails: Quick Pick Variant (Range Ends Today)
|
|
27
27
|
- dropdown_quickpick_default_dates: Quick Pick Variant (Default Dates)
|
|
28
|
-
- dropdown_quickpick_custom_rails: Quick Pick Variant (Custom Quick Pick Dates)
|
|
29
28
|
- dropdown_quickpick_with_date_pickers_rails: Quick Pick with Date Pickers
|
|
30
29
|
- dropdown_quickpick_with_date_pickers_default_rails: Quick Pick with Date Pickers (Default Value)
|
|
31
30
|
|
|
@@ -58,7 +57,6 @@ examples:
|
|
|
58
57
|
- dropdown_quickpick: Quick Pick Variant
|
|
59
58
|
- dropdown_quickpick_range_end: Quick Pick Variant (Range Ends Today)
|
|
60
59
|
- dropdown_quickpick_default_dates: Quick Pick Variant (Default Dates)
|
|
61
|
-
- dropdown_quickpick_custom: Quick Pick Variant (Custom Quick Pick Dates)
|
|
62
60
|
- dropdown_quickpick_with_date_pickers: Quick Pick Variant with Date Pickers
|
|
63
61
|
|
|
64
62
|
|
|
@@ -26,5 +26,4 @@ export {default as DropdownWithCustomActiveStyleOptions} from './_dropdown_with_
|
|
|
26
26
|
export { default as DropdownQuickpick } from './_dropdown_quickpick.jsx'
|
|
27
27
|
export { default as DropdownQuickpickRangeEnd } from './_dropdown_quickpick_range_end.jsx'
|
|
28
28
|
export { default as DropdownQuickpickDefaultDates } from './_dropdown_quickpick_default_dates.jsx'
|
|
29
|
-
export { default as DropdownQuickpickWithDatePickers } from './_dropdown_quickpick_with_date_pickers.jsx'
|
|
30
|
-
export { default as DropdownQuickpickCustom } from './_dropdown_quickpick_custom.jsx'
|
|
29
|
+
export { default as DropdownQuickpickWithDatePickers } from './_dropdown_quickpick_with_date_pickers.jsx'
|
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options.md
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
Individual items can also be disabled by including the `disabled:true` within the object on the treeData for the `returnAllSelected`/`return_all_selected` variant. As noted above, this variant will return data on all checked nodes from the dropdown, irrespective of whether it is a parent or child node.
|
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_disabled.html.erb
ADDED
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
<% treeData = [
|
|
2
|
+
{
|
|
3
|
+
label: "HQ",
|
|
4
|
+
value: "hQ",
|
|
5
|
+
id: "hq2",
|
|
6
|
+
},
|
|
7
|
+
{
|
|
8
|
+
label: "Philadelphia",
|
|
9
|
+
value: "philadelphia",
|
|
10
|
+
id: "phl2",
|
|
11
|
+
disabled: true,
|
|
12
|
+
children: [
|
|
13
|
+
{
|
|
14
|
+
label: "Marketing & Sales PHL",
|
|
15
|
+
value: "marketingAndSalesPhl",
|
|
16
|
+
id: "marketingPHL2",
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
label: "Installation Office PHL",
|
|
20
|
+
value: "installationOfficePhl",
|
|
21
|
+
id: "installationPHL2",
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
label: "Warehouse PHL",
|
|
25
|
+
value: "warehousePhl",
|
|
26
|
+
id: "warehousePHL2",
|
|
27
|
+
},
|
|
28
|
+
]
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
label: "New Jersey",
|
|
32
|
+
value: "newJersey",
|
|
33
|
+
id: "nj2",
|
|
34
|
+
children: [
|
|
35
|
+
{
|
|
36
|
+
label: "New Jersey",
|
|
37
|
+
value: "newJersey",
|
|
38
|
+
id: "nj12",
|
|
39
|
+
children: [
|
|
40
|
+
{
|
|
41
|
+
label: "Marketing & Sales NJ",
|
|
42
|
+
value: "marketingAndSalesNj",
|
|
43
|
+
id: "marketingNJ2",
|
|
44
|
+
disabled: true,
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
label: "Installation Office NJ",
|
|
48
|
+
value: "installationOfficeNj",
|
|
49
|
+
id: "installationNJ2",
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
label: "Warehouse NJ",
|
|
53
|
+
value: "warehouseNj",
|
|
54
|
+
id: "warehouseNJ2",
|
|
55
|
+
},
|
|
56
|
+
],
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
label: "Princeton",
|
|
60
|
+
value: "princeton",
|
|
61
|
+
id: "princeton2",
|
|
62
|
+
children: [
|
|
63
|
+
{
|
|
64
|
+
label: "Marketing & Sales Princeton",
|
|
65
|
+
value: "marketingAndSalesPrinceton",
|
|
66
|
+
id: "marketingPR2",
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
label: "Installation Office Princeton",
|
|
70
|
+
value: "installationOfficePrinceton",
|
|
71
|
+
id: "installationPR2",
|
|
72
|
+
disabled: true,
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
label: "Warehouse Princeton",
|
|
76
|
+
value: "warehousePrinceton",
|
|
77
|
+
id: "warehousePR2",
|
|
78
|
+
},
|
|
79
|
+
]
|
|
80
|
+
},
|
|
81
|
+
]
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
label: "Maryland",
|
|
85
|
+
value: "maryland",
|
|
86
|
+
id: "MD2",
|
|
87
|
+
children: [
|
|
88
|
+
{
|
|
89
|
+
label: "Marketing & Sales MD",
|
|
90
|
+
value: "marketingAndSalesMd",
|
|
91
|
+
id: "marketingMD2",
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
label: "Installation Office MD",
|
|
95
|
+
value: "installationOfficeMd",
|
|
96
|
+
id: "installationMD2",
|
|
97
|
+
},
|
|
98
|
+
{
|
|
99
|
+
label: "Warehouse MD",
|
|
100
|
+
value: "warehouseMd",
|
|
101
|
+
id: "warehouseMD2",
|
|
102
|
+
},
|
|
103
|
+
]
|
|
104
|
+
},
|
|
105
|
+
{
|
|
106
|
+
label: "Connecticut",
|
|
107
|
+
value: "connecticut",
|
|
108
|
+
id: "CT2",
|
|
109
|
+
children: [
|
|
110
|
+
{
|
|
111
|
+
label: "Marketing & Sales CT",
|
|
112
|
+
value: "marketingAndSalesCt",
|
|
113
|
+
id: "marketingCT2",
|
|
114
|
+
},
|
|
115
|
+
{
|
|
116
|
+
label: "Installation Office CT",
|
|
117
|
+
value: "installationOfficeCt",
|
|
118
|
+
id: "installationCT2",
|
|
119
|
+
},
|
|
120
|
+
{
|
|
121
|
+
label: "Warehouse CT",
|
|
122
|
+
value: "warehouseCt",
|
|
123
|
+
id: "warehouseCT2",
|
|
124
|
+
},
|
|
125
|
+
]
|
|
126
|
+
},
|
|
127
|
+
] %>
|
|
128
|
+
|
|
129
|
+
<%= pb_rails("multi_level_select", props: {
|
|
130
|
+
id: "multi-level-select-single-disabled-rails",
|
|
131
|
+
name: "single_disabled",
|
|
132
|
+
tree_data: treeData,
|
|
133
|
+
input_name: "Power",
|
|
134
|
+
variant: "single"
|
|
135
|
+
}) %>
|
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import MultiLevelSelect from "../_multi_level_select";
|
|
3
|
+
|
|
4
|
+
const treeData = [
|
|
5
|
+
{
|
|
6
|
+
label: "HQ",
|
|
7
|
+
value: "hQ",
|
|
8
|
+
id: "hq2",
|
|
9
|
+
},
|
|
10
|
+
{
|
|
11
|
+
label: "Philadelphia",
|
|
12
|
+
value: "philadelphia",
|
|
13
|
+
id: "phl2",
|
|
14
|
+
disabled: true,
|
|
15
|
+
children: [
|
|
16
|
+
{
|
|
17
|
+
label: "Marketing & Sales PHL",
|
|
18
|
+
value: "marketingAndSalesPhl",
|
|
19
|
+
id: "marketingPHL2",
|
|
20
|
+
},
|
|
21
|
+
{
|
|
22
|
+
label: "Installation Office PHL",
|
|
23
|
+
value: "installationOfficePhl",
|
|
24
|
+
id: "installationPHL2",
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
label: "Warehouse PHL",
|
|
28
|
+
value: "warehousePhl",
|
|
29
|
+
id: "warehousePHL2",
|
|
30
|
+
},
|
|
31
|
+
]
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
label: "New Jersey",
|
|
35
|
+
value: "newJersey",
|
|
36
|
+
id: "nj2",
|
|
37
|
+
children: [
|
|
38
|
+
{
|
|
39
|
+
label: "New Jersey",
|
|
40
|
+
value: "newJersey",
|
|
41
|
+
id: "nj12",
|
|
42
|
+
children: [
|
|
43
|
+
{
|
|
44
|
+
label: "Marketing & Sales NJ",
|
|
45
|
+
value: "marketingAndSalesNj",
|
|
46
|
+
id: "marketingNJ2",
|
|
47
|
+
disabled: true,
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
label: "Installation Office NJ",
|
|
51
|
+
value: "installationOfficeNj",
|
|
52
|
+
id: "installationNJ2",
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
label: "Warehouse NJ",
|
|
56
|
+
value: "warehouseNj",
|
|
57
|
+
id: "warehouseNJ2",
|
|
58
|
+
},
|
|
59
|
+
],
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
label: "Princeton",
|
|
63
|
+
value: "princeton",
|
|
64
|
+
id: "princeton2",
|
|
65
|
+
children: [
|
|
66
|
+
{
|
|
67
|
+
label: "Marketing & Sales Princeton",
|
|
68
|
+
value: "marketingAndSalesPrinceton",
|
|
69
|
+
id: "marketingPR2",
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
label: "Installation Office Princeton",
|
|
73
|
+
value: "installationOfficePrinceton",
|
|
74
|
+
id: "installationPR2",
|
|
75
|
+
disabled: true,
|
|
76
|
+
},
|
|
77
|
+
{
|
|
78
|
+
label: "Warehouse Princeton",
|
|
79
|
+
value: "warehousePrinceton",
|
|
80
|
+
id: "warehousePR2",
|
|
81
|
+
},
|
|
82
|
+
]
|
|
83
|
+
},
|
|
84
|
+
]
|
|
85
|
+
},
|
|
86
|
+
{
|
|
87
|
+
label: "Maryland",
|
|
88
|
+
value: "maryland",
|
|
89
|
+
id: "MD2",
|
|
90
|
+
children: [
|
|
91
|
+
{
|
|
92
|
+
label: "Marketing & Sales MD",
|
|
93
|
+
value: "marketingAndSalesMd",
|
|
94
|
+
id: "marketingMD2",
|
|
95
|
+
},
|
|
96
|
+
{
|
|
97
|
+
label: "Installation Office MD",
|
|
98
|
+
value: "installationOfficeMd",
|
|
99
|
+
id: "installationMD2",
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
label: "Warehouse MD",
|
|
103
|
+
value: "warehouseMd",
|
|
104
|
+
id: "warehouseMD2",
|
|
105
|
+
},
|
|
106
|
+
]
|
|
107
|
+
},
|
|
108
|
+
{
|
|
109
|
+
label: "Connecticut",
|
|
110
|
+
value: "connecticut",
|
|
111
|
+
id: "CT2",
|
|
112
|
+
children: [
|
|
113
|
+
{
|
|
114
|
+
label: "Marketing & Sales CT",
|
|
115
|
+
value: "marketingAndSalesCt",
|
|
116
|
+
id: "marketingCT2",
|
|
117
|
+
},
|
|
118
|
+
{
|
|
119
|
+
label: "Installation Office CT",
|
|
120
|
+
value: "installationOfficeCt",
|
|
121
|
+
id: "installationCT2",
|
|
122
|
+
},
|
|
123
|
+
{
|
|
124
|
+
label: "Warehouse CT",
|
|
125
|
+
value: "warehouseCt",
|
|
126
|
+
id: "warehouseCT2",
|
|
127
|
+
},
|
|
128
|
+
]
|
|
129
|
+
},
|
|
130
|
+
];
|
|
131
|
+
|
|
132
|
+
const MultiLevelSelectSingleDisabled = (props) => {
|
|
133
|
+
return (
|
|
134
|
+
<div>
|
|
135
|
+
<MultiLevelSelect
|
|
136
|
+
id="multiselect-single-disabled"
|
|
137
|
+
inputName="Power"
|
|
138
|
+
onSelect={(selectedNode) => console.log("Selected Node", selectedNode)}
|
|
139
|
+
treeData={treeData}
|
|
140
|
+
variant="single"
|
|
141
|
+
{...props}
|
|
142
|
+
/>
|
|
143
|
+
</div>
|
|
144
|
+
)
|
|
145
|
+
};
|
|
146
|
+
|
|
147
|
+
export default MultiLevelSelectSingleDisabled;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Individual items can be disabled by including `disabled: true` within the object on the treeData for the `single` variant. Disabled options are visibly disabled in the dropdown UI and cannot be selected via mouse click or keyboard navigation. When a parent node is disabled, all of its children are automatically disabled as well.
|
|
@@ -15,6 +15,7 @@ examples:
|
|
|
15
15
|
- multi_level_select_disabled_options: Disabled Options (Return All Selected)
|
|
16
16
|
- multi_level_select_disabled_options_parent_default: Disabled Parent Option (Default)
|
|
17
17
|
- multi_level_select_disabled_options_parent: Disabled Parent Option (Return All Selected)
|
|
18
|
+
- multi_level_select_single_disabled: Disabled Options (Single Select)
|
|
18
19
|
|
|
19
20
|
react:
|
|
20
21
|
- multi_level_select_default: Default
|
|
@@ -33,3 +34,4 @@ examples:
|
|
|
33
34
|
- multi_level_select_disabled_options: Disabled Options (Return All Selected)
|
|
34
35
|
- multi_level_select_disabled_options_parent_default: Disabled Parent Option (Default)
|
|
35
36
|
- multi_level_select_disabled_options_parent: Disabled Parent Option (Return All Selected)
|
|
37
|
+
- multi_level_select_single_disabled: Disabled Options (Single Select)
|
|
@@ -14,3 +14,4 @@ export { default as MultiLevelSelectDisabledOptionsParent } from './_multi_level
|
|
|
14
14
|
export { default as MultiLevelSelectDisabledOptionsParentDefault } from './_multi_level_select_disabled_options_parent_default.jsx'
|
|
15
15
|
export { default as MultiLevelSelectDisabledOptionsDefault } from './_multi_level_select_disabled_options_default.jsx'
|
|
16
16
|
export { default as MultiLevelSelectLabel } from './_multi_level_select_label.jsx'
|
|
17
|
+
export { default as MultiLevelSelectSingleDisabled } from './_multi_level_select_single_disabled.jsx'
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import React, { useState } from 'react'
|
|
2
|
+
|
|
3
|
+
import TextInput from '../../pb_text_input/_text_input'
|
|
4
|
+
|
|
5
|
+
const TextInputEmojiMask = (props) => {
|
|
6
|
+
const [basicValue, setBasicValue] = useState('')
|
|
7
|
+
|
|
8
|
+
return (
|
|
9
|
+
<div>
|
|
10
|
+
<TextInput
|
|
11
|
+
emojiMask
|
|
12
|
+
label="Emoji Mask"
|
|
13
|
+
onChange={({ target }) => setBasicValue(target.value)}
|
|
14
|
+
placeholder="Try typing or pasting emojis..."
|
|
15
|
+
value={basicValue}
|
|
16
|
+
{...props}
|
|
17
|
+
/>
|
|
18
|
+
</div>
|
|
19
|
+
)
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
export default TextInputEmojiMask
|
|
23
|
+
|
|
24
|
+
|
|
@@ -11,6 +11,7 @@ examples:
|
|
|
11
11
|
- text_input_mask: Mask
|
|
12
12
|
- text_input_autocomplete: Autocomplete
|
|
13
13
|
- text_input_required_indicator: Required Indicator
|
|
14
|
+
- text_input_emoji_mask: Emoji Mask
|
|
14
15
|
|
|
15
16
|
|
|
16
17
|
react:
|
|
@@ -25,6 +26,7 @@ examples:
|
|
|
25
26
|
- text_input_sanitize: Sanitized Masked Input
|
|
26
27
|
- text_input_autocomplete: Autocomplete
|
|
27
28
|
- text_input_required_indicator: Required Indicator
|
|
29
|
+
- text_input_emoji_mask: Emoji Mask
|
|
28
30
|
|
|
29
31
|
|
|
30
32
|
swift:
|
|
@@ -9,3 +9,4 @@ export { default as TextInputMask } from './_text_input_mask.jsx'
|
|
|
9
9
|
export { default as TextInputSanitize } from './_text_input_sanitize.jsx'
|
|
10
10
|
export { default as TextInputAutocomplete } from './_text_input_autocomplete.jsx'
|
|
11
11
|
export { default as TextInputRequiredIndicator } from './_text_input_required_indicator.jsx'
|
|
12
|
+
export { default as TextInputEmojiMask } from './_text_input_emoji_mask.jsx'
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import React, { useState } from 'react'
|
|
2
|
+
|
|
3
|
+
import Textarea from '../../pb_textarea/_textarea'
|
|
4
|
+
|
|
5
|
+
const TextareaEmojiMask = (props) => {
|
|
6
|
+
const [basicValue, setBasicValue] = useState('')
|
|
7
|
+
|
|
8
|
+
return (
|
|
9
|
+
<div>
|
|
10
|
+
<Textarea
|
|
11
|
+
emojiMask
|
|
12
|
+
label="Emoji Mask"
|
|
13
|
+
onChange={({ target }) => setBasicValue(target.value)}
|
|
14
|
+
placeholder="Try typing or pasting emojis..."
|
|
15
|
+
value={basicValue}
|
|
16
|
+
{...props}
|
|
17
|
+
/>
|
|
18
|
+
</div>
|
|
19
|
+
)
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
export default TextareaEmojiMask
|
|
23
|
+
|
|
24
|
+
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Use the `emojiMask` / `emoji_mask` prop to prevent users from entering emoji characters (🐸 🐈 🏄♂️) in typed or pasted content. It allows accented characters and other non-ASCII letters (é, ü, 文).
|
|
@@ -7,6 +7,7 @@ examples:
|
|
|
7
7
|
- textarea_error: Textarea w/ Error
|
|
8
8
|
- textarea_character_counter: Character Counter
|
|
9
9
|
- textarea_inline: Inline
|
|
10
|
+
- textarea_emoji_mask: Emoji Mask
|
|
10
11
|
|
|
11
12
|
react:
|
|
12
13
|
- textarea_default: Default
|
|
@@ -15,6 +16,7 @@ examples:
|
|
|
15
16
|
- textarea_error: Textarea w/ Error
|
|
16
17
|
- textarea_character_counter: Character Counter
|
|
17
18
|
- textarea_inline: Inline
|
|
19
|
+
- textarea_emoji_mask: Emoji Mask
|
|
18
20
|
|
|
19
21
|
swift:
|
|
20
22
|
- textarea_default_swift: Default
|
|
@@ -4,3 +4,4 @@ export { default as TextareaCustom } from './_textarea_custom.jsx'
|
|
|
4
4
|
export { default as TextareaError } from './_textarea_error.jsx'
|
|
5
5
|
export { default as TextareaCharacterCounter } from './_textarea_character_counter.jsx'
|
|
6
6
|
export { default as TextareaInline } from './_textarea_inline.jsx'
|
|
7
|
+
export { default as TextareaEmojiMask } from './_textarea_emoji_mask.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: 15.7.0.pre.alpha.
|
|
4
|
+
version: 15.7.0.pre.alpha.PLAY2704multilevelselectsingledisabledoptions13404
|
|
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-08 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: playbook_ui
|
|
@@ -924,10 +924,6 @@ files:
|
|
|
924
924
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_default.jsx
|
|
925
925
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick.jsx
|
|
926
926
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick.md
|
|
927
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_custom.jsx
|
|
928
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_custom.md
|
|
929
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_custom_rails.html.erb
|
|
930
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_custom_rails.md
|
|
931
927
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_default_dates.html.erb
|
|
932
928
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_default_dates.jsx
|
|
933
929
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_default_dates.md
|
|
@@ -1540,6 +1536,9 @@ files:
|
|
|
1540
1536
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.html.erb
|
|
1541
1537
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.jsx
|
|
1542
1538
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.md
|
|
1539
|
+
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_disabled.html.erb
|
|
1540
|
+
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_disabled.jsx
|
|
1541
|
+
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_disabled.md
|
|
1543
1542
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.jsx
|
|
1544
1543
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.md
|
|
1545
1544
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.jsx
|
|
@@ -2384,6 +2383,9 @@ files:
|
|
|
2384
2383
|
- app/pb_kits/playbook/pb_text_input/docs/_text_input_disabled.html.erb
|
|
2385
2384
|
- app/pb_kits/playbook/pb_text_input/docs/_text_input_disabled.jsx
|
|
2386
2385
|
- app/pb_kits/playbook/pb_text_input/docs/_text_input_disabled_swift.md
|
|
2386
|
+
- app/pb_kits/playbook/pb_text_input/docs/_text_input_emoji_mask.html.erb
|
|
2387
|
+
- app/pb_kits/playbook/pb_text_input/docs/_text_input_emoji_mask.jsx
|
|
2388
|
+
- app/pb_kits/playbook/pb_text_input/docs/_text_input_emoji_mask.md
|
|
2387
2389
|
- app/pb_kits/playbook/pb_text_input/docs/_text_input_error.html.erb
|
|
2388
2390
|
- app/pb_kits/playbook/pb_text_input/docs/_text_input_error.jsx
|
|
2389
2391
|
- app/pb_kits/playbook/pb_text_input/docs/_text_input_error.md
|
|
@@ -2413,6 +2415,9 @@ files:
|
|
|
2413
2415
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_default.html.erb
|
|
2414
2416
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_default.jsx
|
|
2415
2417
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_default_swift.md
|
|
2418
|
+
- app/pb_kits/playbook/pb_textarea/docs/_textarea_emoji_mask.html.erb
|
|
2419
|
+
- app/pb_kits/playbook/pb_textarea/docs/_textarea_emoji_mask.jsx
|
|
2420
|
+
- app/pb_kits/playbook/pb_textarea/docs/_textarea_emoji_mask.md
|
|
2416
2421
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_error.html.erb
|
|
2417
2422
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_error.jsx
|
|
2418
2423
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_error.md
|
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
import React from "react"
|
|
2
|
-
import Dropdown from "../_dropdown"
|
|
3
|
-
|
|
4
|
-
const DropdownQuickpickCustom = (props) => (
|
|
5
|
-
<div>
|
|
6
|
-
<Dropdown
|
|
7
|
-
customQuickPickDates={{
|
|
8
|
-
dates: [
|
|
9
|
-
// Allow Playbook to handle the logic...
|
|
10
|
-
{
|
|
11
|
-
label: "Last 15 months",
|
|
12
|
-
value: {
|
|
13
|
-
timePeriod: "months",
|
|
14
|
-
amount: 15,
|
|
15
|
-
},
|
|
16
|
-
},
|
|
17
|
-
// Or, be explicit with an exact date range for more control...
|
|
18
|
-
{
|
|
19
|
-
label: "First Week of June 2022",
|
|
20
|
-
value: ["06/01/2022", "06/07/2022"],
|
|
21
|
-
},
|
|
22
|
-
],
|
|
23
|
-
}}
|
|
24
|
-
label="Date Range"
|
|
25
|
-
marginBottom="sm"
|
|
26
|
-
onSelect={(selectedItem) => console.log(selectedItem)}
|
|
27
|
-
variant="quickpick"
|
|
28
|
-
{...props}
|
|
29
|
-
/>
|
|
30
|
-
<Dropdown
|
|
31
|
-
customQuickPickDates={{
|
|
32
|
-
dates: [
|
|
33
|
-
{
|
|
34
|
-
label: "Last 15 months",
|
|
35
|
-
value: {
|
|
36
|
-
timePeriod: "months",
|
|
37
|
-
amount: 15,
|
|
38
|
-
},
|
|
39
|
-
},
|
|
40
|
-
{
|
|
41
|
-
label: "First Week of June 2022",
|
|
42
|
-
value: ["06/01/2022", "06/07/2022"],
|
|
43
|
-
},
|
|
44
|
-
],
|
|
45
|
-
override: false,
|
|
46
|
-
}}
|
|
47
|
-
label="Date Range - Append to Defaults"
|
|
48
|
-
onSelect={(selectedItem) => console.log(selectedItem)}
|
|
49
|
-
variant="quickpick"
|
|
50
|
-
{...props}
|
|
51
|
-
/>
|
|
52
|
-
</div>
|
|
53
|
-
)
|
|
54
|
-
|
|
55
|
-
export default DropdownQuickpickCustom
|
|
56
|
-
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
The `customQuickPickDates` prop allows for defining custom quick pick date options for the dropdown. The prop accepts an object with two properties: `dates` and `override`.
|
|
2
|
-
|
|
3
|
-
**The `dates` property** accepts an array of objects. Each object has `label` and `value` properties. The `label` is what will be displayed in the dropdown menu. The `value` property defines the date range that will be selected, and can be:
|
|
4
|
-
- An array of two date strings representing a specific range (e.g., `["06/01/2022", "06/07/2022"]`)
|
|
5
|
-
- An object with `timePeriod` and `amount` properties for dynamic date calculations:
|
|
6
|
-
- The `timePeriod` property accepts `"days"`, `"weeks"`, `"months"`, `"quarters"`, or `"years"`, representing past time periods calculated from today.
|
|
7
|
-
- The `amount` property accepts any number.
|
|
8
|
-
|
|
9
|
-
**The `override` property** is a boolean that controls whether custom dates replace or append to the default quick pick options. Default is `true` (replaces defaults). Set to `false` to append your custom dates to the default quick pick options.
|
|
10
|
-
|
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
<%= pb_rails("dropdown", props: {
|
|
2
|
-
custom_quick_pick_dates: {
|
|
3
|
-
dates: [
|
|
4
|
-
# Allow Playbook to handle the logic...
|
|
5
|
-
{
|
|
6
|
-
label: "Last 15 months",
|
|
7
|
-
value: {
|
|
8
|
-
time_period: "months",
|
|
9
|
-
amount: 15
|
|
10
|
-
}
|
|
11
|
-
},
|
|
12
|
-
# Or, be explicit with an exact date range for more control...
|
|
13
|
-
{
|
|
14
|
-
label: "First Week of June 2022",
|
|
15
|
-
value: ["06/01/2022", "06/07/2022"]
|
|
16
|
-
}
|
|
17
|
-
]
|
|
18
|
-
},
|
|
19
|
-
id: "date-range-quickpick-custom",
|
|
20
|
-
label: "Date Range",
|
|
21
|
-
margin_bottom: "sm",
|
|
22
|
-
variant: "quickpick"
|
|
23
|
-
}) %>
|
|
24
|
-
|
|
25
|
-
<%= pb_rails("dropdown", props: {
|
|
26
|
-
custom_quick_pick_dates: {
|
|
27
|
-
override: false,
|
|
28
|
-
dates: [
|
|
29
|
-
{
|
|
30
|
-
label: "Last 15 months",
|
|
31
|
-
value: {
|
|
32
|
-
time_period: "months",
|
|
33
|
-
amount: 15
|
|
34
|
-
}
|
|
35
|
-
},
|
|
36
|
-
{
|
|
37
|
-
label: "First Week of June 2022",
|
|
38
|
-
value: ["06/01/2022", "06/07/2022"]
|
|
39
|
-
}
|
|
40
|
-
]
|
|
41
|
-
},
|
|
42
|
-
id: "date-range-quickpick-custom-append-to-defaults",
|
|
43
|
-
label: "Date Range - Append to Defaults",
|
|
44
|
-
variant: "quickpick"
|
|
45
|
-
}) %>
|
|
46
|
-
|
|
47
|
-
<script>
|
|
48
|
-
const dropdown1 = document.getElementById("date-range-quickpick-custom");
|
|
49
|
-
if (dropdown1) {
|
|
50
|
-
dropdown1.addEventListener("pb:dropdown:selected", (e) => {
|
|
51
|
-
const option = e.detail;
|
|
52
|
-
console.log("Selected option:", option);
|
|
53
|
-
});
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
const dropdown2 = document.getElementById("date-range-quickpick-custom-append-to-defaults");
|
|
57
|
-
if (dropdown2) {
|
|
58
|
-
dropdown2.addEventListener("pb:dropdown:selected", (e) => {
|
|
59
|
-
const option = e.detail;
|
|
60
|
-
console.log("Selected option:", option);
|
|
61
|
-
});
|
|
62
|
-
}
|
|
63
|
-
</script>
|
|
64
|
-
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
The `custom_quick_pick_dates` prop allows for defining custom quick pick date options for the dropdown. The prop accepts an object with two properties: `dates` and `override`.
|
|
2
|
-
|
|
3
|
-
**The `dates` property** accepts an array of objects. Each object has `label` and `value` properties. The `label` is what will be displayed in the dropdown menu. The `value` property defines the date range that will be selected, and can be:
|
|
4
|
-
- An array of two date strings representing a specific range (e.g., `["06/01/2022", "06/07/2022"]`)
|
|
5
|
-
- An object with `time_period` and `amount` properties for dynamic date calculations:
|
|
6
|
-
- The `time_period` property accepts `"days"`, `"weeks"`, `"months"`, `"quarters"`, or `"years"`, representing past time periods calculated from today.
|
|
7
|
-
- The `amount` property accepts any number.
|
|
8
|
-
|
|
9
|
-
**The `override` property** is a boolean that controls whether custom dates replace or append to the default quick pick options. Default is `true` (replaces defaults). Set to `false` to append your custom dates to the default quick pick options.
|
|
10
|
-
|