playbook_ui_docs 16.2.0.pre.rc.4 → 16.2.0.pre.rc.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_required_indicator.html.erb +5 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_required_indicator.jsx +13 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_required_indicator.md +1 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_required_indicator.html.erb +14 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_required_indicator.jsx +42 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_required_indicator.md +3 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +2 -2
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_form/docs/_form_with_required_indicator.html.erb +151 -1
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_button.html.erb +1 -1
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_button.jsx +1 -0
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_date_picker.html.erb +1 -1
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_date_picker.jsx +1 -0
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_default.html.erb +3 -3
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_default.jsx +4 -1
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_full_width.html.erb +4 -4
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_full_width.jsx +4 -1
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_typeahead.jsx +1 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_required_indicator.html.erb +72 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_required_indicator.jsx +87 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_required_indicator.md +3 -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 +18 -17
- metadata +11 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 48184907075f514fdc916d8a761168a1316b4a32390548a21101b56978ce1339
|
|
4
|
+
data.tar.gz: 4e7b0fca59852bd1914970bfe5cfc561839c20975d41c52da4fd62052f00a590
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 7f4785dc8b1f2c49232ceaff80393ad7bcc59d498c686fa29d74234e6da893992f435805609da9f221d8a9b828192452dbc5bdb44aea575bc8c07543795f44c7
|
|
7
|
+
data.tar.gz: '0999cb544f280154499ece19f85c908d7cb14483736ca8a8eb10765c27128a35cae60e1a54ed44005cffd8003ea48af65414313f836c2c268ee40a63eeadcf0b'
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from "react"
|
|
2
|
+
import DatePicker from "../_date_picker"
|
|
3
|
+
|
|
4
|
+
const DatePickerRequiredIndicator = (props) => (
|
|
5
|
+
<DatePicker
|
|
6
|
+
label="Required Date Picker"
|
|
7
|
+
pickerId="date_picker_required_indicator"
|
|
8
|
+
requiredIndicator
|
|
9
|
+
{...props}
|
|
10
|
+
/>
|
|
11
|
+
)
|
|
12
|
+
|
|
13
|
+
export default DatePickerRequiredIndicator
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
The `requiredIndicator`/`required_indicator` prop displays a red asterisk (*) next to the label to visually indicate that the field is required. This is purely visual and does not enforce validation—you can pair it with HTML `required`, client-side validation, or server-side validation as needed.
|
|
@@ -31,6 +31,7 @@ examples:
|
|
|
31
31
|
- date_picker_time: Time Selection
|
|
32
32
|
- date_picker_positions: Custom Positions
|
|
33
33
|
- date_picker_positions_element: Custom Position (based on element)
|
|
34
|
+
- date_picker_required_indicator: Required Indicator
|
|
34
35
|
- date_picker_turbo_frames: Within Turbo Frames
|
|
35
36
|
|
|
36
37
|
react:
|
|
@@ -64,3 +65,4 @@ examples:
|
|
|
64
65
|
- date_picker_time: Time Selection
|
|
65
66
|
- date_picker_positions: Custom Positions
|
|
66
67
|
- date_picker_positions_element: Custom Position (based on element)
|
|
68
|
+
- date_picker_required_indicator: Required Indicator
|
|
@@ -27,4 +27,5 @@ export { default as DatePickerQuickPickCustom } from './_date_picker_quick_pick_
|
|
|
27
27
|
export { default as DatePickerQuickPickCustomOverride } from './_date_picker_quick_pick_custom_override'
|
|
28
28
|
export { default as DatePickerQuickPickDefaultDate } from './_date_picker_quick_pick_default_date'
|
|
29
29
|
export { default as DatePickerRangePattern } from './_date_picker_range_pattern'
|
|
30
|
-
export { default as DatePickerAndDropdownRange } from './_date_picker_and_dropdown_range.jsx'
|
|
30
|
+
export { default as DatePickerAndDropdownRange } from './_date_picker_and_dropdown_range.jsx'
|
|
31
|
+
export { default as DatePickerRequiredIndicator } from "./_date_picker_required_indicator.jsx";
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
<%
|
|
2
|
+
options = [
|
|
3
|
+
{ label: 'United States', value: 'unitedStates', id: 'us' },
|
|
4
|
+
{ label: 'Canada', value: 'canada', id: 'ca' },
|
|
5
|
+
{ label: 'Pakistan', value: 'pakistan', id: 'pk' }
|
|
6
|
+
]
|
|
7
|
+
%>
|
|
8
|
+
|
|
9
|
+
<%= pb_rails("dropdown", props: {
|
|
10
|
+
id: "dropdown_required_indicator",
|
|
11
|
+
label: "Select a Country",
|
|
12
|
+
options: options,
|
|
13
|
+
required_indicator: true
|
|
14
|
+
}) %>
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import Dropdown from "../../pb_dropdown/_dropdown";
|
|
3
|
+
|
|
4
|
+
const DropdownRequiredIndicator = (props) => {
|
|
5
|
+
const options = [
|
|
6
|
+
{
|
|
7
|
+
label: "United States",
|
|
8
|
+
value: "unitedStates",
|
|
9
|
+
id: "us",
|
|
10
|
+
},
|
|
11
|
+
{
|
|
12
|
+
label: "Canada",
|
|
13
|
+
value: "canada",
|
|
14
|
+
id: "ca",
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
label: "Pakistan",
|
|
18
|
+
value: "pakistan",
|
|
19
|
+
id: "pk",
|
|
20
|
+
},
|
|
21
|
+
];
|
|
22
|
+
|
|
23
|
+
return (
|
|
24
|
+
<div>
|
|
25
|
+
<Dropdown
|
|
26
|
+
label="Select a Country"
|
|
27
|
+
options={options}
|
|
28
|
+
requiredIndicator
|
|
29
|
+
{...props}
|
|
30
|
+
>
|
|
31
|
+
{options.map((option) => (
|
|
32
|
+
<Dropdown.Option
|
|
33
|
+
key={option.id}
|
|
34
|
+
option={option}
|
|
35
|
+
/>
|
|
36
|
+
))}
|
|
37
|
+
</Dropdown>
|
|
38
|
+
</div>
|
|
39
|
+
);
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
export default DropdownRequiredIndicator;
|
|
@@ -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.
|
|
@@ -31,6 +31,7 @@ examples:
|
|
|
31
31
|
- dropdown_quickpick_custom_rails: Quick Pick Variant (Custom Quick Pick Dates)
|
|
32
32
|
- dropdown_quickpick_with_date_pickers_rails: Quick Pick with Date Pickers
|
|
33
33
|
- dropdown_quickpick_with_date_pickers_default_rails: Quick Pick with Date Pickers (Default Value)
|
|
34
|
+
- dropdown_required_indicator: Required Indicator
|
|
34
35
|
|
|
35
36
|
react:
|
|
36
37
|
- dropdown_default: Default
|
|
@@ -66,5 +67,4 @@ examples:
|
|
|
66
67
|
- dropdown_quickpick_default_dates: Quick Pick Variant (Default Dates)
|
|
67
68
|
- dropdown_quickpick_custom: Quick Pick Variant (Custom Quick Pick Dates)
|
|
68
69
|
- dropdown_quickpick_with_date_pickers: Quick Pick Variant with Date Pickers
|
|
69
|
-
|
|
70
|
-
|
|
70
|
+
- dropdown_required_indicator: Required Indicator
|
|
@@ -30,4 +30,5 @@ export { default as DropdownQuickpickDefaultDates } from './_dropdown_quickpick_
|
|
|
30
30
|
export { default as DropdownQuickpickWithDatePickers } from './_dropdown_quickpick_with_date_pickers.jsx'
|
|
31
31
|
export { default as DropdownQuickpickCustom } from './_dropdown_quickpick_custom.jsx'
|
|
32
32
|
export { default as DropdownWithClearable } from './_dropdown_with_clearable.jsx'
|
|
33
|
-
export { default as DropdownWithConstrainHeight } from './_dropdown_with_constrain_height.jsx'
|
|
33
|
+
export { default as DropdownWithConstrainHeight } from './_dropdown_with_constrain_height.jsx'
|
|
34
|
+
export { default as DropdownRequiredIndicator } from "./_dropdown_required_indicator.jsx";
|
|
@@ -1,3 +1,135 @@
|
|
|
1
|
+
<% tree_data = [
|
|
2
|
+
{
|
|
3
|
+
label: "HQ",
|
|
4
|
+
value: "hQ",
|
|
5
|
+
id: "hq",
|
|
6
|
+
},
|
|
7
|
+
{
|
|
8
|
+
label: "Philadelphia",
|
|
9
|
+
value: "philadelphia",
|
|
10
|
+
id: "phl",
|
|
11
|
+
children: [
|
|
12
|
+
{
|
|
13
|
+
label: "Marketing & Sales PHL",
|
|
14
|
+
value: "marketingAndSalesPhl",
|
|
15
|
+
id: "marketingPHL",
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
label: "Installation Office PHL",
|
|
19
|
+
value: "installationOfficePhl",
|
|
20
|
+
id: "installationPHL",
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
label: "Warehouse PHL",
|
|
24
|
+
value: "warehousePhl",
|
|
25
|
+
id: "warehousePHL",
|
|
26
|
+
},
|
|
27
|
+
]
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
label: "New Jersey",
|
|
31
|
+
value: "newJersey",
|
|
32
|
+
id: "nj",
|
|
33
|
+
children: [
|
|
34
|
+
{
|
|
35
|
+
label: "New Jersey",
|
|
36
|
+
value: "newJersey",
|
|
37
|
+
id: "nj1",
|
|
38
|
+
children: [
|
|
39
|
+
{
|
|
40
|
+
label: "Marketing & Sales NJ",
|
|
41
|
+
value: "marketingAndSalesNj",
|
|
42
|
+
id: "marketingNJ",
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
label: "Installation Office NJ",
|
|
46
|
+
value: "installationOfficeNj",
|
|
47
|
+
id: "installationNJ",
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
label: "Warehouse NJ",
|
|
51
|
+
value: "warehouseNj",
|
|
52
|
+
id: "warehouseNJ",
|
|
53
|
+
},
|
|
54
|
+
],
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
label: "Princeton",
|
|
58
|
+
value: "princeton",
|
|
59
|
+
id: "princeton",
|
|
60
|
+
children: [
|
|
61
|
+
{
|
|
62
|
+
label: "Marketing & Sales Princeton",
|
|
63
|
+
value: "marketingAndSalesPrinceton",
|
|
64
|
+
id: "marketingPR",
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
label: "Installation Office Princeton",
|
|
68
|
+
value: "installationOfficePrinceton",
|
|
69
|
+
id: "installationPR",
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
label: "Warehouse Princeton",
|
|
73
|
+
value: "warehousePrinceton",
|
|
74
|
+
id: "warehousePR",
|
|
75
|
+
},
|
|
76
|
+
]
|
|
77
|
+
},
|
|
78
|
+
]
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
label: "Maryland",
|
|
82
|
+
value: "maryland",
|
|
83
|
+
id: "MD",
|
|
84
|
+
children: [
|
|
85
|
+
{
|
|
86
|
+
label: "Marketing & Sales MD",
|
|
87
|
+
value: "marketingAndSalesMd",
|
|
88
|
+
id: "marketingMD",
|
|
89
|
+
},
|
|
90
|
+
{
|
|
91
|
+
label: "Installation Office MD",
|
|
92
|
+
value: "installationOfficeMd",
|
|
93
|
+
id: "installationMD",
|
|
94
|
+
},
|
|
95
|
+
{
|
|
96
|
+
label: "Warehouse MD",
|
|
97
|
+
value: "warehouseMd",
|
|
98
|
+
id: "warehouseMD",
|
|
99
|
+
},
|
|
100
|
+
]
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
label: "Connecticut",
|
|
104
|
+
value: "connecticut",
|
|
105
|
+
id: "CT",
|
|
106
|
+
children: [
|
|
107
|
+
{
|
|
108
|
+
label: "Marketing & Sales CT",
|
|
109
|
+
value: "marketingAndSalesCt",
|
|
110
|
+
id: "marketingCT",
|
|
111
|
+
},
|
|
112
|
+
{
|
|
113
|
+
label: "Installation Office CT",
|
|
114
|
+
value: "installationOfficeCt",
|
|
115
|
+
id: "installationCT",
|
|
116
|
+
},
|
|
117
|
+
{
|
|
118
|
+
label: "Warehouse CT",
|
|
119
|
+
value: "warehouseCt",
|
|
120
|
+
id: "warehouseCT",
|
|
121
|
+
},
|
|
122
|
+
]
|
|
123
|
+
},
|
|
124
|
+
]; %>
|
|
125
|
+
<%
|
|
126
|
+
example_dropdown_options = [
|
|
127
|
+
{ label: 'United States', value: 'United States', id: 'us' },
|
|
128
|
+
{ label: 'Canada', value: 'Canada', id: 'ca' },
|
|
129
|
+
{ label: 'Pakistan', value: 'Pakistan', id: 'pk' }
|
|
130
|
+
]
|
|
131
|
+
%>
|
|
132
|
+
|
|
1
133
|
<%= pb_form_with(scope: :example, url: "", method: :get, validate: true) do |form| %>
|
|
2
134
|
<%= form.typeahead :example_typeahead_field, props: { label: true, required: true, required_indicator: true } %>
|
|
3
135
|
<%= form.text_field :example_text_field, props: { label: true, required: true, required_indicator: true } %>
|
|
@@ -10,8 +142,26 @@
|
|
|
10
142
|
<%= form.url_field :example_url_field, props: { label: true, required: true, required_indicator: true } %>
|
|
11
143
|
<%= form.text_area :example_text_area, props: { label: true, required: true, required_indicator: true } %>
|
|
12
144
|
<%= form.text_area :example_text_area_2, props: { label: "Textarea Custom Label", required: true, required_indicator: true } %>
|
|
13
|
-
<%#
|
|
145
|
+
<%# form.check_box :example_checkbox, props: { label: true, text: "Checkbox Label", required: true, required_indicator: true } %>
|
|
14
146
|
<%= form.time_picker :example_time_picker_required_indicator, props: { label: true, required: true, required_indicator: true } %>
|
|
147
|
+
<%= form.date_picker :example_date_picker_required_indicator, props: { label: true, required: true, required_indicator: true } %>
|
|
148
|
+
<%= form.date_picker :example_date_picker_required_indicator_custom, props: { label: "Custom Date Picker Label", required: true, required_indicator: true } %>
|
|
149
|
+
<%= form.multi_level_select :example_multi_level_select_required_indicator, props: {
|
|
150
|
+
label: true,
|
|
151
|
+
margin_y: 'sm',
|
|
152
|
+
required: true,
|
|
153
|
+
required_indicator: true,
|
|
154
|
+
tree_data: tree_data
|
|
155
|
+
} %>
|
|
156
|
+
<%= form.multi_level_select :example_multi_level_select_required_indicator_custom, props: {
|
|
157
|
+
label: "Custom Multi Level Select Label",
|
|
158
|
+
margin_y: 'sm',
|
|
159
|
+
required: true,
|
|
160
|
+
required_indicator: true,
|
|
161
|
+
tree_data: tree_data
|
|
162
|
+
} %>
|
|
163
|
+
<%= form.dropdown_field :example_dropdown, props: { label: true, options: example_dropdown_options, required: true, required_indicator: true } %>
|
|
164
|
+
<%= form.dropdown_field :example_dropdown_2, props: { label: "Dropdown Custom Label", options: example_dropdown_options, required: true, required_indicator: true } %>
|
|
15
165
|
|
|
16
166
|
<%= form.actions do |action| %>
|
|
17
167
|
<%= action.submit %>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<div>
|
|
2
2
|
<%= pb_rails("form_group") do %>
|
|
3
|
-
<%= pb_rails("text_input", props: { label: "with label", placeholder: "Search" }) %>
|
|
3
|
+
<%= pb_rails("text_input", props: { label: "with label", placeholder: "Search", id: "search-with-label" }) %>
|
|
4
4
|
<%= pb_rails("button", props: { text: "Submit", variant: "secondary" }) %>
|
|
5
5
|
<% end %>
|
|
6
6
|
<br/>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<div>
|
|
2
2
|
<%= pb_rails("form_group") do %>
|
|
3
|
-
<%= pb_rails("text_input", props: { label: "Event", placeholder: "Event Name" }) %>
|
|
3
|
+
<%= pb_rails("text_input", props: { label: "Event", placeholder: "Event Name", id: "event-name" }) %>
|
|
4
4
|
<%= pb_rails("date_picker", props: { label: "Event Date", picker_id: "date-picker-default" }) %>
|
|
5
5
|
<% end %>
|
|
6
6
|
</div>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<div>
|
|
2
2
|
<%= pb_rails("form_group") do %>
|
|
3
|
-
<%= pb_rails("text_input", props: { label: "First Name", placeholder: "Enter First Name" }) %>
|
|
4
|
-
<%= pb_rails("text_input", props: { label: "Middle
|
|
5
|
-
<%= pb_rails("text_input", props: { label: "Last Name", placeholder: "Enter Last Name" }) %>
|
|
3
|
+
<%= pb_rails("text_input", props: { label: "First Name", placeholder: "Enter First Name", id: "first-name" }) %>
|
|
4
|
+
<%= pb_rails("text_input", props: { label: "Middle Initial", placeholder: "Enter Middle Initial", id: "middle-initial" }) %>
|
|
5
|
+
<%= pb_rails("text_input", props: { label: "Last Name", placeholder: "Enter Last Name", id: "last-name" }) %>
|
|
6
6
|
<% end %>
|
|
7
7
|
</div>
|
|
@@ -7,16 +7,19 @@ const FormGroupDefault = (props) => (
|
|
|
7
7
|
<div>
|
|
8
8
|
<FormGroup>
|
|
9
9
|
<TextInput
|
|
10
|
+
id="first-name"
|
|
10
11
|
label="First Name"
|
|
11
12
|
placeholder="Enter First Name"
|
|
12
13
|
{...props}
|
|
13
14
|
/>
|
|
14
15
|
<TextInput
|
|
15
|
-
|
|
16
|
+
id="middle-initial"
|
|
17
|
+
label="Middle Initial"
|
|
16
18
|
placeholder="Enter Middle Initial"
|
|
17
19
|
{...props}
|
|
18
20
|
/>
|
|
19
21
|
<TextInput
|
|
22
|
+
id="last-name"
|
|
20
23
|
label="Last Name"
|
|
21
24
|
placeholder="Enter Last Name"
|
|
22
25
|
{...props}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
<div>
|
|
2
2
|
<%= pb_rails("form_group", props: { full_width: true }) do %>
|
|
3
|
-
<%= pb_rails("text_input", props: { label: "First Name", placeholder: "Enter First Name" }) %>
|
|
4
|
-
<%= pb_rails("text_input", props: { label: "Middle
|
|
5
|
-
<%= pb_rails("text_input", props: { label: "Last Name", placeholder: "Enter Last Name" }) %>
|
|
3
|
+
<%= pb_rails("text_input", props: { label: "First Name", placeholder: "Enter First Name", id: "first-name-full-width" }) %>
|
|
4
|
+
<%= pb_rails("text_input", props: { label: "Middle Initial", placeholder: "Enter Middle Initial", id: "middle-initial-full-width" }) %>
|
|
5
|
+
<%= pb_rails("text_input", props: { label: "Last Name", placeholder: "Enter Last Name", id: "last-name-full-width" }) %>
|
|
6
6
|
<% end %>
|
|
7
7
|
<br/>
|
|
8
8
|
<br/>
|
|
@@ -10,4 +10,4 @@
|
|
|
10
10
|
<%= pb_rails("text_input", props: { placeholder: "Search" }) %>
|
|
11
11
|
<%= pb_rails("button", props: { text: "Submit", variant: "secondary" }) %>
|
|
12
12
|
<% end %>
|
|
13
|
-
</div>
|
|
13
|
+
</div>
|
|
@@ -9,16 +9,19 @@ const FormGroupFullWidth = (props) => (
|
|
|
9
9
|
<div>
|
|
10
10
|
<FormGroup fullWidth>
|
|
11
11
|
<TextInput
|
|
12
|
+
id="first-name-full-width"
|
|
12
13
|
label="First Name"
|
|
13
14
|
placeholder="Enter First Name"
|
|
14
15
|
{...props}
|
|
15
16
|
/>
|
|
16
17
|
<TextInput
|
|
17
|
-
|
|
18
|
+
id="middle-initial-full-width"
|
|
19
|
+
label="Middle Initial"
|
|
18
20
|
placeholder="Enter Middle Initial"
|
|
19
21
|
{...props}
|
|
20
22
|
/>
|
|
21
23
|
<TextInput
|
|
24
|
+
id="last-name-full-width"
|
|
22
25
|
label="Last Name"
|
|
23
26
|
placeholder="Enter Last Name"
|
|
24
27
|
{...props}
|
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_required_indicator.html.erb
ADDED
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
<% treeData = [{
|
|
2
|
+
label: "Power Home Remodeling",
|
|
3
|
+
value: "powerHomeRemodeling",
|
|
4
|
+
id: "100",
|
|
5
|
+
expanded: true,
|
|
6
|
+
children: [
|
|
7
|
+
{
|
|
8
|
+
label: "People",
|
|
9
|
+
value: "people",
|
|
10
|
+
id: "101",
|
|
11
|
+
expanded: true,
|
|
12
|
+
children: [
|
|
13
|
+
{
|
|
14
|
+
label: "Talent Acquisition",
|
|
15
|
+
value: "talentAcquisition",
|
|
16
|
+
id: "102",
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
label: "Business Affairs",
|
|
20
|
+
value: "businessAffairs",
|
|
21
|
+
id: "103",
|
|
22
|
+
children: [
|
|
23
|
+
{
|
|
24
|
+
label: "Initiatives",
|
|
25
|
+
value: "initiatives",
|
|
26
|
+
id: "104",
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
label: "Learning & Development",
|
|
30
|
+
value: "learningAndDevelopment",
|
|
31
|
+
id: "105",
|
|
32
|
+
},
|
|
33
|
+
],
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
label: "People Experience",
|
|
37
|
+
value: "peopleExperience",
|
|
38
|
+
id: "106",
|
|
39
|
+
},
|
|
40
|
+
],
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
label: "Contact Center",
|
|
44
|
+
value: "contactCenter",
|
|
45
|
+
id: "107",
|
|
46
|
+
children: [
|
|
47
|
+
{
|
|
48
|
+
label: "Appointment Management",
|
|
49
|
+
value: "appointmentManagement",
|
|
50
|
+
id: "108",
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
label: "Customer Service",
|
|
54
|
+
value: "customerService",
|
|
55
|
+
id: "109",
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
label: "Energy",
|
|
59
|
+
value: "energy",
|
|
60
|
+
id: "110",
|
|
61
|
+
},
|
|
62
|
+
],
|
|
63
|
+
},
|
|
64
|
+
],
|
|
65
|
+
}] %>
|
|
66
|
+
|
|
67
|
+
<%= pb_rails("multi_level_select", props: {
|
|
68
|
+
id: "select_a_department",
|
|
69
|
+
label: "Select a Department",
|
|
70
|
+
required_indicator: true,
|
|
71
|
+
tree_data: treeData
|
|
72
|
+
}) %>
|
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_required_indicator.jsx
ADDED
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
import React from "react"
|
|
2
|
+
import MultiLevelSelect from "../_multi_level_select"
|
|
3
|
+
|
|
4
|
+
const treeData = [
|
|
5
|
+
{
|
|
6
|
+
label: "Power Home Remodeling",
|
|
7
|
+
value: "powerHomeRemodeling",
|
|
8
|
+
id: "powerhome1",
|
|
9
|
+
expanded: true,
|
|
10
|
+
children: [
|
|
11
|
+
{
|
|
12
|
+
label: "People",
|
|
13
|
+
value: "people",
|
|
14
|
+
id: "people1",
|
|
15
|
+
expanded: true,
|
|
16
|
+
children: [
|
|
17
|
+
{
|
|
18
|
+
label: "Talent Acquisition",
|
|
19
|
+
value: "talentAcquisition",
|
|
20
|
+
id: "talent1"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
label: "Business Affairs",
|
|
24
|
+
value: "businessAffairs",
|
|
25
|
+
id: "business1",
|
|
26
|
+
children: [
|
|
27
|
+
{
|
|
28
|
+
label: "Initiatives",
|
|
29
|
+
value: "initiatives",
|
|
30
|
+
id: "initiative1"
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
label: "Learning & Development",
|
|
34
|
+
value: "learningAndDevelopment",
|
|
35
|
+
id: "development1"
|
|
36
|
+
}
|
|
37
|
+
]
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
label: "People Experience",
|
|
41
|
+
value: "peopleExperience",
|
|
42
|
+
id: "experience1"
|
|
43
|
+
}
|
|
44
|
+
]
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
label: "Contact Center",
|
|
48
|
+
value: "contactCenter",
|
|
49
|
+
id: "contact1",
|
|
50
|
+
children: [
|
|
51
|
+
{
|
|
52
|
+
label: "Appointment Management",
|
|
53
|
+
value: "appointmentManagement",
|
|
54
|
+
id: "appointment1"
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
label: "Customer Service",
|
|
58
|
+
value: "customerService",
|
|
59
|
+
id: "customer1"
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
label: "Energy",
|
|
63
|
+
value: "energy",
|
|
64
|
+
id: "energy1"
|
|
65
|
+
}
|
|
66
|
+
]
|
|
67
|
+
}
|
|
68
|
+
]
|
|
69
|
+
}
|
|
70
|
+
]
|
|
71
|
+
|
|
72
|
+
const MultiLevelSelectRequiredIndicator = (props) => {
|
|
73
|
+
return (
|
|
74
|
+
<div>
|
|
75
|
+
<MultiLevelSelect
|
|
76
|
+
id="select_a_department"
|
|
77
|
+
label="Select a Department"
|
|
78
|
+
onSelect={(selectedNodes) => console.log("Selected Items", selectedNodes)}
|
|
79
|
+
requiredIndicator
|
|
80
|
+
treeData={treeData}
|
|
81
|
+
{...props}
|
|
82
|
+
/>
|
|
83
|
+
</div>
|
|
84
|
+
)
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
export default MultiLevelSelectRequiredIndicator
|
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_required_indicator.md
ADDED
|
@@ -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.
|
|
@@ -17,6 +17,7 @@ examples:
|
|
|
17
17
|
- multi_level_select_disabled_options_parent_default: Disabled Parent Option (Default)
|
|
18
18
|
- multi_level_select_disabled_options_parent: Disabled Parent Option (Return All Selected)
|
|
19
19
|
- multi_level_select_single_disabled: Disabled Options (Single Select)
|
|
20
|
+
- multi_level_select_required_indicator: Required Indicator
|
|
20
21
|
|
|
21
22
|
react:
|
|
22
23
|
- multi_level_select_default: Default
|
|
@@ -37,3 +38,4 @@ examples:
|
|
|
37
38
|
- multi_level_select_disabled_options_parent_default: Disabled Parent Option (Default)
|
|
38
39
|
- multi_level_select_disabled_options_parent: Disabled Parent Option (Return All Selected)
|
|
39
40
|
- multi_level_select_single_disabled: Disabled Options (Single Select)
|
|
41
|
+
- multi_level_select_required_indicator: Required Indicator
|
|
@@ -1,18 +1,19 @@
|
|
|
1
|
-
export { default as MultiLevelSelectDefault } from
|
|
2
|
-
export { default as MultiLevelSelectSingle } from
|
|
3
|
-
export { default as MultiLevelSelectSingleChildrenOnly } from
|
|
4
|
-
export { default as MultiLevelSelectReturnAllSelected } from
|
|
1
|
+
export { default as MultiLevelSelectDefault } from "./_multi_level_select_default.jsx"
|
|
2
|
+
export { default as MultiLevelSelectSingle } from "./_multi_level_select_single.jsx"
|
|
3
|
+
export { default as MultiLevelSelectSingleChildrenOnly } from "./_multi_level_select_single_children_only.jsx"
|
|
4
|
+
export { default as MultiLevelSelectReturnAllSelected } from "./_multi_level_select_return_all_selected.jsx"
|
|
5
5
|
export { default as MultiLevelSelectSelectedIdsReact } from "./_multi_level_select_selected_ids_react.jsx"
|
|
6
|
-
export { default as MultiLevelSelectColor } from
|
|
7
|
-
export { default as MultiLevelSelectInputDisplay } from
|
|
8
|
-
export { default as MultiLevelSelectWithChildren } from
|
|
9
|
-
export { default as MultiLevelSelectWithChildrenWithRadios } from
|
|
10
|
-
export { default as MultiLevelSelectDisabled } from
|
|
11
|
-
export { default as MultiLevelSelectReactHook
|
|
12
|
-
export { default as MultiLevelSelectError } from
|
|
13
|
-
export { default as MultiLevelSelectDisabledOptions } from
|
|
14
|
-
export { default as MultiLevelSelectDisabledOptionsParent } from
|
|
15
|
-
export { default as MultiLevelSelectDisabledOptionsParentDefault } from
|
|
16
|
-
export { default as MultiLevelSelectDisabledOptionsDefault } from
|
|
17
|
-
export { default as MultiLevelSelectLabel } from
|
|
18
|
-
export { default as MultiLevelSelectSingleDisabled } from
|
|
6
|
+
export { default as MultiLevelSelectColor } from "./_multi_level_select_color.jsx"
|
|
7
|
+
export { default as MultiLevelSelectInputDisplay } from "./_multi_level_select_input_display.jsx"
|
|
8
|
+
export { default as MultiLevelSelectWithChildren } from "./_multi_level_select_with_children.jsx"
|
|
9
|
+
export { default as MultiLevelSelectWithChildrenWithRadios } from "./_multi_level_select_with_children_with_radios.jsx"
|
|
10
|
+
export { default as MultiLevelSelectDisabled } from "./_multi_level_select_disabled.jsx"
|
|
11
|
+
export { default as MultiLevelSelectReactHook } from "./_multi_level_select_react_hook.jsx"
|
|
12
|
+
export { default as MultiLevelSelectError } from "./_multi_level_select_error.jsx"
|
|
13
|
+
export { default as MultiLevelSelectDisabledOptions } from "./_multi_level_select_disabled_options.jsx"
|
|
14
|
+
export { default as MultiLevelSelectDisabledOptionsParent } from "./_multi_level_select_disabled_options_parent.jsx"
|
|
15
|
+
export { default as MultiLevelSelectDisabledOptionsParentDefault } from "./_multi_level_select_disabled_options_parent_default.jsx"
|
|
16
|
+
export { default as MultiLevelSelectDisabledOptionsDefault } from "./_multi_level_select_disabled_options_default.jsx"
|
|
17
|
+
export { default as MultiLevelSelectLabel } from "./_multi_level_select_label.jsx"
|
|
18
|
+
export { default as MultiLevelSelectSingleDisabled } from "./_multi_level_select_single_disabled.jsx"
|
|
19
|
+
export { default as MultiLevelSelectRequiredIndicator } from "./_multi_level_select_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.5
|
|
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-02-
|
|
12
|
+
date: 2026-02-09 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: playbook_ui
|
|
@@ -648,6 +648,9 @@ files:
|
|
|
648
648
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.md
|
|
649
649
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.html.erb
|
|
650
650
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.md
|
|
651
|
+
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_required_indicator.html.erb
|
|
652
|
+
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_required_indicator.jsx
|
|
653
|
+
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_required_indicator.md
|
|
651
654
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_time.html.erb
|
|
652
655
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_time.jsx
|
|
653
656
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_time.md
|
|
@@ -894,6 +897,9 @@ files:
|
|
|
894
897
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_with_date_pickers_default_rails.md
|
|
895
898
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_with_date_pickers_rails.html.erb
|
|
896
899
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_with_date_pickers_rails.md
|
|
900
|
+
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_required_indicator.html.erb
|
|
901
|
+
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_required_indicator.jsx
|
|
902
|
+
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_required_indicator.md
|
|
897
903
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.html.erb
|
|
898
904
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.jsx
|
|
899
905
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.jsx
|
|
@@ -1437,6 +1443,9 @@ files:
|
|
|
1437
1443
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.md
|
|
1438
1444
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.jsx
|
|
1439
1445
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.md
|
|
1446
|
+
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_required_indicator.html.erb
|
|
1447
|
+
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_required_indicator.jsx
|
|
1448
|
+
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_required_indicator.md
|
|
1440
1449
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb
|
|
1441
1450
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.md
|
|
1442
1451
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.html.erb
|