playbook_ui_docs 16.2.0.pre.rc.2 → 16.2.0.pre.rc.3
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 -5
- 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_typeahead/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_typeahead/docs/index.js +21 -22
- metadata +1 -8
- 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_multi_level_select/docs/_multi_level_select_label.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: 9dde0c9d8000a12320a71a4ede80351eb2e8944ffdea10935df0aebbfa463023
|
|
4
|
+
data.tar.gz: a3f02b553ae7c6ffa01801fb6a075a937cbfeb460fcec27317a72783cbdda154
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 35cac0e8c6ffe71a664f739f7073f9c8303d1c53bc6e0b50671ea1e0e7860ec9efc8431176b0110956c4482b045dde99366a287bcc6b57d8537fce6905fd2c48
|
|
7
|
+
data.tar.gz: efabd0e21b7e5626943ea739f535867ce238bfccf8e43e32e67108422eea8f6127dae32674f8f8e468055ac53b40c13861b4ba0978cfbcb86e804ae4a90bfaf8
|
|
@@ -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,16 +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 } %>
|
|
11
|
+
<%= form.phone_number_field :example_phone_number_field, props: { label: true, required: true, required_indicator: true } %>
|
|
14
12
|
<%= form.time_picker :example_time_picker_required_indicator, props: { label: true, required: true, required_indicator: true } %>
|
|
15
13
|
|
|
16
14
|
<%= form.actions do |action| %>
|
|
@@ -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;
|
|
@@ -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.2.0.pre.rc.
|
|
4
|
+
version: 16.2.0.pre.rc.3
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Power UX
|
|
@@ -421,9 +421,6 @@ files:
|
|
|
421
421
|
- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_props_swift.md
|
|
422
422
|
- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.jsx
|
|
423
423
|
- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.md
|
|
424
|
-
- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_required_indicator.html.erb
|
|
425
|
-
- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_required_indicator.jsx
|
|
426
|
-
- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_required_indicator.md
|
|
427
424
|
- app/pb_kits/playbook/pb_checkbox/docs/_description.md
|
|
428
425
|
- app/pb_kits/playbook/pb_checkbox/docs/example.yml
|
|
429
426
|
- app/pb_kits/playbook/pb_checkbox/docs/index.js
|
|
@@ -1434,7 +1431,6 @@ files:
|
|
|
1434
1431
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_input_display.md
|
|
1435
1432
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.html.erb
|
|
1436
1433
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.jsx
|
|
1437
|
-
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.md
|
|
1438
1434
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.jsx
|
|
1439
1435
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.md
|
|
1440
1436
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb
|
|
@@ -2621,9 +2617,6 @@ files:
|
|
|
2621
2617
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input_react.md
|
|
2622
2618
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.jsx
|
|
2623
2619
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.md
|
|
2624
|
-
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_required_indicator.html.erb
|
|
2625
|
-
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_required_indicator.jsx
|
|
2626
|
-
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_required_indicator.md
|
|
2627
2620
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.html.erb
|
|
2628
2621
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.jsx
|
|
2629
2622
|
- 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,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.
|