playbook_ui_docs 16.0.0.pre.alpha.PLAY2744dropdownquickpickpt113758 → 16.0.0.pre.alpha.PLAY267213608
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_advanced_table/docs/_advanced_table_inline_row_loading.md +2 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_background/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_background/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +0 -4
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +1 -3
- data/app/pb_kits/playbook/pb_form/docs/_form_with_required_indicator.html.erb +1 -3
- data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +33 -35
- data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml +0 -3
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js +0 -2
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_input_options.html.erb +0 -14
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_input_options.md +1 -3
- data/app/pb_kits/playbook/pb_textarea/docs/example.yml +1 -3
- data/app/pb_kits/playbook/pb_textarea/docs/index.js +0 -1
- metadata +2 -26
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading_rails.html.erb +0 -64
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading_rails.md +0 -18
- data/app/pb_kits/playbook/pb_background/docs/_background_responsive.jsx +0 -30
- data/app/pb_kits/playbook/pb_background/docs/_background_responsive.md +0 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection_rails.md +0 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection_react.md +0 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_clearable.html.erb +0 -52
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_clearable.jsx +0 -72
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_clearable.md +0 -5
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_placeholder.html.erb +0 -9
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_placeholder.jsx +0 -33
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_placeholder.md +0 -3
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_input_display.html.erb +0 -74
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_input_display.jsx +0 -87
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_input_display.md +0 -3
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_required_indicator.jsx +0 -35
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_required_indicator.md +0 -3
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.html.erb +0 -10
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.jsx +0 -21
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.md +0 -3
- data/app/pb_kits/playbook/pb_table/docs/_sections.yml +0 -68
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_required_indicator.html.erb +0 -5
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_required_indicator.jsx +0 -25
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_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: 204769a9dd91f097c6b51f6c40905bd2f9fc38fdc78cc2fa341e93e220bad5cf
|
|
4
|
+
data.tar.gz: bb6e1e0cccdb2449ef41475171217103f43f57af1a20cd5aa0fdaa5b4595a7cc
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: e06b46d42e53adbf3d1f2ece4e87145a6a1cd170bc5ff6bb66879b1ea1792e864f60a1d9dec23bf9f0004739b7f2fe6b869acfc6f0b16e392564114714ab6768
|
|
7
|
+
data.tar.gz: f9e7110cd7c0515c8f1db888ed8121e533ea8656a23d03165f81d6650c3d96cfc25c032152c34fb2c4b0a045d6ff5f6955c5ec3197f16829f5157c8a0b66a497
|
|
@@ -6,9 +6,9 @@ In the first Advanced Table in this code example, 2021 has an empty children arr
|
|
|
6
6
|
This prop is set to `false` by default.
|
|
7
7
|
|
|
8
8
|
|
|
9
|
-
###
|
|
9
|
+
### persistToggleExpansion
|
|
10
10
|
The `persistToggleExpansionButton` is a boolean prop that renders the toggle-all icon in the top left header cell for complex datasets with empty `children` arrays and advanced querying logic explained in the preceeding doc example. Your logic may require an additional query helper file to update data specifically from requerying via toggle all buttons.
|
|
11
11
|
|
|
12
12
|
In the second and third Advanced Tables in this code example, all 3 rows have empty children arrays. The second Advanced Table demonstrates that the toggle all button does not render (prior to an initial row expansion) without `persistToggleExpansionButton` in place. The third Advanced Table shows the toggle all button due to `persistToggleExpansionButton`.
|
|
13
13
|
|
|
14
|
-
This prop is set to
|
|
14
|
+
This prop is set to false by default and should only be used in conjunction with `inlineRowLoading`.
|
|
@@ -29,7 +29,6 @@ examples:
|
|
|
29
29
|
- advanced_table_background_control_rails: Column Styling Background Color
|
|
30
30
|
- advanced_table_background_colors_rails: Column Styling Individual Cell Background Color
|
|
31
31
|
- advanced_table_column_border_color_rails: Column Group Border Color
|
|
32
|
-
- advanced_table_inline_row_loading_rails: Inline Row Loading
|
|
33
32
|
|
|
34
33
|
|
|
35
34
|
react:
|
|
@@ -7,4 +7,3 @@ export { default as BackgroundStatusSubtle } from './_background_status_subtle.j
|
|
|
7
7
|
export { default as BackgroundCategory } from './_background_category.jsx'
|
|
8
8
|
export { default as BackgroundSize } from './_background_size.jsx'
|
|
9
9
|
export { default as BackgroundOverlay } from './_background_overlay.jsx'
|
|
10
|
-
export { default as BackgroundResponsive } from './_background_responsive.jsx'
|
|
@@ -21,9 +21,7 @@ examples:
|
|
|
21
21
|
- dropdown_default_value: Default Value
|
|
22
22
|
- dropdown_multi_select_with_default: Multi Select Default Value
|
|
23
23
|
- dropdown_blank_selection: Blank Selection
|
|
24
|
-
- dropdown_with_placeholder: Placeholder
|
|
25
24
|
- dropdown_separators_hidden: Separators Hidden
|
|
26
|
-
- dropdown_with_clearable: Clearable
|
|
27
25
|
- dropdown_quickpick_rails: Quick Pick Variant
|
|
28
26
|
- dropdown_quickpick_range_end_rails: Quick Pick Variant (Range Ends Today)
|
|
29
27
|
- dropdown_quickpick_default_dates: Quick Pick Variant (Default Dates)
|
|
@@ -54,9 +52,7 @@ examples:
|
|
|
54
52
|
- dropdown_default_value: Default Value
|
|
55
53
|
- dropdown_multi_select_with_default: Multi Select Default Value
|
|
56
54
|
- dropdown_blank_selection: Blank Selection
|
|
57
|
-
- dropdown_with_placeholder: Placeholder
|
|
58
55
|
- dropdown_clear_selection: Clear Selection
|
|
59
|
-
- dropdown_with_clearable: Clearable
|
|
60
56
|
- dropdown_separators_hidden: Separators Hidden
|
|
61
57
|
- dropdown_with_external_control: useDropdown Hook
|
|
62
58
|
- dropdown_quickpick: Quick Pick Variant
|
|
@@ -11,7 +11,6 @@ export { default as DropdownSubcomponentStructure } from './_dropdown_subcompone
|
|
|
11
11
|
export { default as DropdownError } from './_dropdown_error.jsx'
|
|
12
12
|
export { default as DropdownDefaultValue } from './_dropdown_default_value.jsx'
|
|
13
13
|
export { default as DropdownBlankSelection } from './_dropdown_blank_selection.jsx'
|
|
14
|
-
export { default as DropdownWithPlaceholder } from './_dropdown_with_placeholder.jsx'
|
|
15
14
|
export { default as DropdownClearSelection } from './_dropdown_clear_selection.jsx'
|
|
16
15
|
export { default as DropdownSubtleVariant } from './_dropdown_subtle_variant.jsx'
|
|
17
16
|
export { default as DropdownSeparatorsHidden } from './_dropdown_separators_hidden.jsx'
|
|
@@ -28,5 +27,4 @@ export { default as DropdownQuickpick } from './_dropdown_quickpick.jsx'
|
|
|
28
27
|
export { default as DropdownQuickpickRangeEnd } from './_dropdown_quickpick_range_end.jsx'
|
|
29
28
|
export { default as DropdownQuickpickDefaultDates } from './_dropdown_quickpick_default_dates.jsx'
|
|
30
29
|
export { default as DropdownQuickpickWithDatePickers } from './_dropdown_quickpick_with_date_pickers.jsx'
|
|
31
|
-
export { default as DropdownQuickpickCustom } from './_dropdown_quickpick_custom.jsx'
|
|
32
|
-
export { default as DropdownWithClearable } from './_dropdown_with_clearable.jsx'
|
|
30
|
+
export { default as DropdownQuickpickCustom } from './_dropdown_quickpick_custom.jsx'
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
<%= pb_form_with(scope: :example, url: "", method: :get, validate: true) do |form| %>
|
|
2
2
|
<%= form.text_field :example_text_field, props: { label: true, required: true, required_indicator: true } %>
|
|
3
3
|
<%= form.text_field :example_text_field_2, props: { label: "Text Field Custom Label", required: true, required_indicator: true } %>
|
|
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
4
|
<%= form.email_field :example_email_field, props: { label: true, required: true, required_indicator: true } %>
|
|
7
5
|
<%= form.number_field :example_number_field, props: { label: true, required: true, required_indicator: true } %>
|
|
8
6
|
<%= form.search_field :example_search_field, props: { label: true, required: true, required_indicator: true } %>
|
|
@@ -13,4 +11,4 @@
|
|
|
13
11
|
<%= action.submit %>
|
|
14
12
|
<%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
|
|
15
13
|
<% end %>
|
|
16
|
-
<% end %>
|
|
14
|
+
<% end %>
|
|
@@ -1,39 +1,37 @@
|
|
|
1
1
|
examples:
|
|
2
2
|
rails:
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
- multi_level_select_single_disabled: Disabled Options (Single Select)
|
|
3
|
+
- multi_level_select_default: Default
|
|
4
|
+
- multi_level_select_single: Single Select
|
|
5
|
+
- multi_level_select_single_children_only: Single Select w/ Hidden Radios
|
|
6
|
+
- multi_level_select_return_all_selected: Return All Selected
|
|
7
|
+
- multi_level_select_selected_ids: Selected Ids
|
|
8
|
+
- multi_level_select_with_form: With Form
|
|
9
|
+
- multi_level_select_color: With Pills (Custom Color)
|
|
10
|
+
- multi_level_select_reset: Reset Selection
|
|
11
|
+
- multi_level_select_label: With Label
|
|
12
|
+
- multi_level_select_error: Error
|
|
13
|
+
- multi_level_select_disabled: Disabled Input
|
|
14
|
+
- multi_level_select_disabled_options_default: Disabled Options (Default)
|
|
15
|
+
- multi_level_select_disabled_options: Disabled Options (Return All Selected)
|
|
16
|
+
- multi_level_select_disabled_options_parent_default: Disabled Parent Option (Default)
|
|
17
|
+
- multi_level_select_disabled_options_parent: Disabled Parent Option (Return All Selected)
|
|
18
|
+
- multi_level_select_single_disabled: Disabled Options (Single Select)
|
|
20
19
|
|
|
21
20
|
react:
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
- multi_level_select_single_disabled: Disabled Options (Single Select)
|
|
21
|
+
- multi_level_select_default: Default
|
|
22
|
+
- multi_level_select_react_hook: React Hook
|
|
23
|
+
- multi_level_select_single: Single Select
|
|
24
|
+
- multi_level_select_single_children_only: Single Select w/ Hidden Radios
|
|
25
|
+
- multi_level_select_return_all_selected: Return All Selected
|
|
26
|
+
- multi_level_select_selected_ids_react: Selected Ids
|
|
27
|
+
- multi_level_select_color: With Pills (Custom Color)
|
|
28
|
+
- multi_level_select_with_children: Checkboxes With Children
|
|
29
|
+
- multi_level_select_with_children_with_radios: Single Select With Children
|
|
30
|
+
- multi_level_select_label: With Label
|
|
31
|
+
- multi_level_select_error: Error
|
|
32
|
+
- multi_level_select_disabled: Disabled Input
|
|
33
|
+
- multi_level_select_disabled_options_default: Disabled Options (Default)
|
|
34
|
+
- multi_level_select_disabled_options: Disabled Options (Return All Selected)
|
|
35
|
+
- multi_level_select_disabled_options_parent_default: Disabled Parent Option (Default)
|
|
36
|
+
- multi_level_select_disabled_options_parent: Disabled Parent Option (Return All Selected)
|
|
37
|
+
- multi_level_select_single_disabled: Disabled Options (Single Select)
|
|
@@ -4,7 +4,6 @@ export { default as MultiLevelSelectSingleChildrenOnly } from './_multi_level_se
|
|
|
4
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
6
|
export { default as MultiLevelSelectColor } from './_multi_level_select_color.jsx'
|
|
7
|
-
export { default as MultiLevelSelectInputDisplay } from './_multi_level_select_input_display.jsx'
|
|
8
7
|
export { default as MultiLevelSelectWithChildren } from './_multi_level_select_with_children.jsx'
|
|
9
8
|
export { default as MultiLevelSelectWithChildrenWithRadios } from './_multi_level_select_with_children_with_radios.jsx'
|
|
10
9
|
export { default as MultiLevelSelectDisabled } from './_multi_level_select_disabled.jsx'
|
|
@@ -9,7 +9,6 @@ examples:
|
|
|
9
9
|
- rich_text_editor_templates: Templates
|
|
10
10
|
# - rich_text_editor_toolbar_bottom: Toolbar Bottom
|
|
11
11
|
- rich_text_editor_inline: Inline
|
|
12
|
-
- rich_text_editor_required_indicator: Required Indicator
|
|
13
12
|
- rich_text_editor_preview: Preview
|
|
14
13
|
|
|
15
14
|
react:
|
|
@@ -32,7 +31,5 @@ examples:
|
|
|
32
31
|
- rich_text_editor_advanced_inline: Advanced (Inline)
|
|
33
32
|
- rich_text_editor_advanced_height: Advanced Height
|
|
34
33
|
- rich_text_editor_advanced_min_height: Advanced Min Height
|
|
35
|
-
- rich_text_editor_required_indicator: Required Indicator
|
|
36
|
-
- rich_text_editor_advanced_required_indicator: Advanced Required Indicator
|
|
37
34
|
- rich_text_editor_preview: Preview
|
|
38
35
|
- rich_text_editor_advanced_preview: Advanced Preview
|
|
@@ -19,5 +19,3 @@ export { default as RichTextEditorAdvancedSticky } from './_rich_text_editor_adv
|
|
|
19
19
|
export { default as RichTextEditorAdvancedInline } from './_rich_text_editor_advanced_inline.jsx'
|
|
20
20
|
export { default as RichTextEditorAdvancedHeight } from './_rich_text_editor_advanced_height.jsx'
|
|
21
21
|
export { default as RichTextEditorAdvancedMinHeight } from './_rich_text_editor_advanced_min_height.jsx'
|
|
22
|
-
export { default as RichTextEditorRequiredIndicator } from './_rich_text_editor_required_indicator.jsx'
|
|
23
|
-
export { default as RichTextEditorAdvancedRequiredIndicator } from './_rich_text_editor_advanced_required_indicator.jsx'
|
|
@@ -23,17 +23,3 @@
|
|
|
23
23
|
name: "comment",
|
|
24
24
|
rows: 4
|
|
25
25
|
}) %>
|
|
26
|
-
|
|
27
|
-
<br/>
|
|
28
|
-
|
|
29
|
-
<%= pb_rails("textarea", props: {
|
|
30
|
-
label: "Data and ARIA Attributes",
|
|
31
|
-
name: "description",
|
|
32
|
-
rows: 4,
|
|
33
|
-
input_options: {
|
|
34
|
-
'aria-label': "Enter description",
|
|
35
|
-
'aria-describedby': "help-text",
|
|
36
|
-
data: { controller: "textarea", action: "focus->handleFocus" },
|
|
37
|
-
id: "description-textarea"
|
|
38
|
-
}
|
|
39
|
-
}) %>
|
|
@@ -1,3 +1 @@
|
|
|
1
|
-
Use the `
|
|
2
|
-
|
|
3
|
-
Additional HTML attributes (e.g. data or ARIA attributes) can also be passed directly to the `<textarea>` via `input_options`.
|
|
1
|
+
Use the `id` prop to set an id on the container wrapper, or use `input_options: { id: ... }` to set an id directly on the textarea element. Both can be used together if needed.
|
|
@@ -8,7 +8,6 @@ examples:
|
|
|
8
8
|
- textarea_character_counter: Character Counter
|
|
9
9
|
- textarea_inline: Inline
|
|
10
10
|
- textarea_emoji_mask: Emoji Mask
|
|
11
|
-
- textarea_required_indicator: Required Indicator
|
|
12
11
|
- textarea_input_options: Input Options
|
|
13
12
|
|
|
14
13
|
react:
|
|
@@ -19,9 +18,8 @@ examples:
|
|
|
19
18
|
- textarea_character_counter: Character Counter
|
|
20
19
|
- textarea_inline: Inline
|
|
21
20
|
- textarea_emoji_mask: Emoji Mask
|
|
22
|
-
- textarea_required_indicator: Required Indicator
|
|
23
21
|
|
|
24
22
|
swift:
|
|
25
23
|
- textarea_default_swift: Default
|
|
26
24
|
- textarea_error_swift: Textarea w/ Error
|
|
27
|
-
- textarea_props_swift: ""
|
|
25
|
+
- textarea_props_swift: ""
|
|
@@ -5,4 +5,3 @@ 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
7
|
export { default as TextareaEmojiMask } from './_textarea_emoji_mask.jsx'
|
|
8
|
-
export { default as TextareaRequiredIndicator } from './_textarea_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.0.0.pre.alpha.
|
|
4
|
+
version: 16.0.0.pre.alpha.PLAY267213608
|
|
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-19 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: playbook_ui
|
|
@@ -100,8 +100,6 @@ files:
|
|
|
100
100
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.md
|
|
101
101
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.jsx
|
|
102
102
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.md
|
|
103
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading_rails.html.erb
|
|
104
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading_rails.md
|
|
105
103
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.html.erb
|
|
106
104
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.jsx
|
|
107
105
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading_rails.md
|
|
@@ -231,8 +229,6 @@ files:
|
|
|
231
229
|
- app/pb_kits/playbook/pb_background/docs/_background_light.md
|
|
232
230
|
- app/pb_kits/playbook/pb_background/docs/_background_overlay.jsx
|
|
233
231
|
- app/pb_kits/playbook/pb_background/docs/_background_overlay.md
|
|
234
|
-
- app/pb_kits/playbook/pb_background/docs/_background_responsive.jsx
|
|
235
|
-
- app/pb_kits/playbook/pb_background/docs/_background_responsive.md
|
|
236
232
|
- app/pb_kits/playbook/pb_background/docs/_background_size.html.erb
|
|
237
233
|
- app/pb_kits/playbook/pb_background/docs/_background_size.jsx
|
|
238
234
|
- app/pb_kits/playbook/pb_background/docs/_background_size.md
|
|
@@ -840,8 +836,6 @@ files:
|
|
|
840
836
|
- app/pb_kits/playbook/pb_draggable/docs/index.js
|
|
841
837
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.html.erb
|
|
842
838
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.jsx
|
|
843
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection_rails.md
|
|
844
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection_react.md
|
|
845
839
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx
|
|
846
840
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md
|
|
847
841
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx
|
|
@@ -903,9 +897,6 @@ files:
|
|
|
903
897
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.html.erb
|
|
904
898
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.jsx
|
|
905
899
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.md
|
|
906
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_clearable.html.erb
|
|
907
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_clearable.jsx
|
|
908
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_clearable.md
|
|
909
900
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_active_style_options.jsx
|
|
910
901
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_active_style_options_react.md
|
|
911
902
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx
|
|
@@ -936,9 +927,6 @@ files:
|
|
|
936
927
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb
|
|
937
928
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx
|
|
938
929
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.md
|
|
939
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_placeholder.html.erb
|
|
940
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_placeholder.jsx
|
|
941
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_placeholder.md
|
|
942
930
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.jsx
|
|
943
931
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.md
|
|
944
932
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.html.erb
|
|
@@ -1419,9 +1407,6 @@ files:
|
|
|
1419
1407
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent_default.md
|
|
1420
1408
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_error.html.erb
|
|
1421
1409
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_error.jsx
|
|
1422
|
-
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_input_display.html.erb
|
|
1423
|
-
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_input_display.jsx
|
|
1424
|
-
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_input_display.md
|
|
1425
1410
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.html.erb
|
|
1426
1411
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.jsx
|
|
1427
1412
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.jsx
|
|
@@ -1922,8 +1907,6 @@ files:
|
|
|
1922
1907
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_min_height.jsx
|
|
1923
1908
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_min_height.md
|
|
1924
1909
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_preview.jsx
|
|
1925
|
-
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_required_indicator.jsx
|
|
1926
|
-
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_required_indicator.md
|
|
1927
1910
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_simple.jsx
|
|
1928
1911
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_sticky.jsx
|
|
1929
1912
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_sticky.md
|
|
@@ -1941,9 +1924,6 @@ files:
|
|
|
1941
1924
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.md
|
|
1942
1925
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb
|
|
1943
1926
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.jsx
|
|
1944
|
-
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.html.erb
|
|
1945
|
-
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.jsx
|
|
1946
|
-
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.md
|
|
1947
1927
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.html.erb
|
|
1948
1928
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.jsx
|
|
1949
1929
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_sticky.html.erb
|
|
@@ -2144,7 +2124,6 @@ files:
|
|
|
2144
2124
|
- app/pb_kits/playbook/pb_stat_value/docs/example.yml
|
|
2145
2125
|
- app/pb_kits/playbook/pb_stat_value/docs/index.js
|
|
2146
2126
|
- app/pb_kits/playbook/pb_table/docs/_description.md
|
|
2147
|
-
- app/pb_kits/playbook/pb_table/docs/_sections.yml
|
|
2148
2127
|
- app/pb_kits/playbook/pb_table/docs/_table_action_middle.html.erb
|
|
2149
2128
|
- app/pb_kits/playbook/pb_table/docs/_table_action_middle.jsx
|
|
2150
2129
|
- app/pb_kits/playbook/pb_table/docs/_table_action_middle.md
|
|
@@ -2346,9 +2325,6 @@ files:
|
|
|
2346
2325
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_input_options.html.erb
|
|
2347
2326
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_input_options.md
|
|
2348
2327
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_props_swift.md
|
|
2349
|
-
- app/pb_kits/playbook/pb_textarea/docs/_textarea_required_indicator.html.erb
|
|
2350
|
-
- app/pb_kits/playbook/pb_textarea/docs/_textarea_required_indicator.jsx
|
|
2351
|
-
- app/pb_kits/playbook/pb_textarea/docs/_textarea_required_indicator.md
|
|
2352
2328
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_resize.html.erb
|
|
2353
2329
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_resize.jsx
|
|
2354
2330
|
- app/pb_kits/playbook/pb_textarea/docs/example.yml
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading_rails.html.erb
DELETED
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
<% column_definitions = [
|
|
2
|
-
{
|
|
3
|
-
accessor: "year",
|
|
4
|
-
label: "Year",
|
|
5
|
-
cellAccessors: ["quarter", "month", "day"],
|
|
6
|
-
},
|
|
7
|
-
{
|
|
8
|
-
accessor: "newEnrollments",
|
|
9
|
-
label: "New Enrollments",
|
|
10
|
-
},
|
|
11
|
-
{
|
|
12
|
-
accessor: "scheduledMeetings",
|
|
13
|
-
label: "Scheduled Meetings",
|
|
14
|
-
},
|
|
15
|
-
{
|
|
16
|
-
accessor: "attendanceRate",
|
|
17
|
-
label: "Attendance Rate",
|
|
18
|
-
},
|
|
19
|
-
{
|
|
20
|
-
accessor: "completedClasses",
|
|
21
|
-
label: "Completed Classes",
|
|
22
|
-
},
|
|
23
|
-
{
|
|
24
|
-
accessor: "classCompletionRate",
|
|
25
|
-
label: "Class Completion Rate",
|
|
26
|
-
},
|
|
27
|
-
{
|
|
28
|
-
accessor: "graduatedStudents",
|
|
29
|
-
label: "Graduated Students",
|
|
30
|
-
}
|
|
31
|
-
] %>
|
|
32
|
-
|
|
33
|
-
<%= pb_rails("caption", props: { text: "Inline Row Loading - Demonstrated in Row 1 (Rows 2 and 3 have data)" }) %>
|
|
34
|
-
|
|
35
|
-
<%= pb_rails("advanced_table", props: {
|
|
36
|
-
id: "inline-loading-table-1",
|
|
37
|
-
table_data: @table_data_inline_loading,
|
|
38
|
-
column_definitions: column_definitions,
|
|
39
|
-
enable_toggle_expansion: "all",
|
|
40
|
-
inline_row_loading: true,
|
|
41
|
-
margin_bottom: "md"
|
|
42
|
-
}) %>
|
|
43
|
-
|
|
44
|
-
<%= pb_rails("caption", props: { text: "Inline Row Loading with No Subrow Data - All Rows Display Inline Row Loading and the Toggle All Button is not rendered" }) %>
|
|
45
|
-
|
|
46
|
-
<%= pb_rails("advanced_table", props: {
|
|
47
|
-
id: "inline-loading-table-2",
|
|
48
|
-
table_data: @table_data_inline_loading_empty_children,
|
|
49
|
-
column_definitions: column_definitions,
|
|
50
|
-
enable_toggle_expansion: "all",
|
|
51
|
-
inline_row_loading: true,
|
|
52
|
-
margin_bottom: "md"
|
|
53
|
-
}) %>
|
|
54
|
-
|
|
55
|
-
<%= pb_rails("caption", props: { text: "Inline Row Loading and Persist Toggle Expansion Button with No Subrow Data - All Rows Display Inline Row Loading and the Toggle All Button is rendered" }) %>
|
|
56
|
-
|
|
57
|
-
<%= pb_rails("advanced_table", props: {
|
|
58
|
-
id: "inline-loading-table-3",
|
|
59
|
-
table_data: @table_data_inline_loading_empty_children,
|
|
60
|
-
column_definitions: column_definitions,
|
|
61
|
-
enable_toggle_expansion: "all",
|
|
62
|
-
inline_row_loading: true,
|
|
63
|
-
persist_toggle_expansion_button: true
|
|
64
|
-
}) %>
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading_rails.md
DELETED
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
### inline_row_loading
|
|
2
|
-
By default, the kit assumes that the initial dataset is complete, rendering expansion controls only when children are present. If, however, you want to implement lazy-loading patterns where children are fetched only when a parent is expanded, use the `inline_row_loading` prop.
|
|
3
|
-
|
|
4
|
-
When `inline_row_loading` is set to `true`:
|
|
5
|
-
- Expansion controls are rendered for rows with empty `children` arrays (you must pass `children: []` to any row that will have children loaded later)
|
|
6
|
-
- When such a row is expanded, an inline loading indicator appears until the child data is loaded
|
|
7
|
-
- This enables lazy-loading patterns without one-off hacks
|
|
8
|
-
|
|
9
|
-
In the first table above, row "2021" has an empty `children` array. Click to expand it and see the inline loading state. Rows 2 and 3 have actual child data.
|
|
10
|
-
|
|
11
|
-
This prop is set to `false` by default.
|
|
12
|
-
|
|
13
|
-
### persist_toggle_expansion_button
|
|
14
|
-
The `persist_toggle_expansion_button` is a boolean prop that renders the toggle-all icon in the top left header cell for complex datasets with empty `children` arrays and advanced querying logic explained in the preceding doc example. Your logic may require an additional query helper file to update data specifically from requerying via toggle all buttons.
|
|
15
|
-
|
|
16
|
-
In the second and third Advanced Tables in this code example, all 3 rows have empty children arrays. The second Advanced Table demonstrates that the toggle all button does not render (prior to an initial row expansion) without `persist_toggle_expansion_button` in place. The third Advanced Table shows the toggle all button due to `persist_toggle_expansion_button`.
|
|
17
|
-
|
|
18
|
-
This prop is set to `false` by default and should only be used in conjunction with `inline_row_loading`.
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import Background from '../../pb_background/_background'
|
|
3
|
-
|
|
4
|
-
const BackgroundResponsive = (props) => (
|
|
5
|
-
<>
|
|
6
|
-
<Background
|
|
7
|
-
alt="colorful background"
|
|
8
|
-
backgroundColor={{ xs: "primary", sm: "warning", md: "success", lg: "error", xl: "category_1" }}
|
|
9
|
-
className="background lazyload"
|
|
10
|
-
padding="xl"
|
|
11
|
-
{...props}
|
|
12
|
-
/>
|
|
13
|
-
<br/>
|
|
14
|
-
<Background
|
|
15
|
-
alt="colorful background"
|
|
16
|
-
className="background lazyload"
|
|
17
|
-
imageUrl={{
|
|
18
|
-
xs: "https://unsplash.it/500/400/?image=633",
|
|
19
|
-
sm: "https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80",
|
|
20
|
-
md: "https://unsplash.it/500/400/?image=633",
|
|
21
|
-
lg: "https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80",
|
|
22
|
-
xl: "https://unsplash.it/500/400/?image=633"
|
|
23
|
-
}}
|
|
24
|
-
padding="xl"
|
|
25
|
-
{...props}
|
|
26
|
-
/>
|
|
27
|
-
</>
|
|
28
|
-
)
|
|
29
|
-
|
|
30
|
-
export default BackgroundResponsive
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
The `backgroundColor`, `backgroundSize`, `backgroundPosition`, `backgroundRepeat`, and `imageUrl` props support responsive sizes. To use them, pass an object to the prop containing your values relative to responsive break points. To test this here, resize your browser window to responsively change these Backgrounds' `backgroundColor` and `imageUrl`.
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
The `blank_selection` prop adds a blank option at the top of the dropdown options list. This allows users to explicitly clear their selection by choosing the blank option.
|
|
2
|
-
|
|
3
|
-
The blank selection option appears as the first item in the dropdown and has an empty value (`id: ""`, `value: ""`). When selected, it effectively clears the dropdown selection.
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
The `blankSelection` prop adds a blank option at the top of the dropdown options list. This allows users to explicitly clear their selection by choosing the blank option.
|
|
2
|
-
|
|
3
|
-
The blank selection option appears as the first item in the dropdown and has an empty value (`id: ""`, `value: ""`). When selected, it effectively clears the dropdown selection.
|
|
@@ -1,52 +0,0 @@
|
|
|
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: "date-range-quickpick-reset-closeable",
|
|
11
|
-
label: "Quick Pick",
|
|
12
|
-
variant: "quickpick",
|
|
13
|
-
clearable: false
|
|
14
|
-
}) %>
|
|
15
|
-
|
|
16
|
-
<%= pb_rails("button", props: {
|
|
17
|
-
margin_y: "md",
|
|
18
|
-
text: "Reset",
|
|
19
|
-
html_options: {
|
|
20
|
-
onclick: "handleReset()"
|
|
21
|
-
}
|
|
22
|
-
}) %>
|
|
23
|
-
|
|
24
|
-
<%= pb_rails("dropdown", props: {
|
|
25
|
-
id: "closeable-default",
|
|
26
|
-
options: options,
|
|
27
|
-
clearable: false,
|
|
28
|
-
default_value: options.last,
|
|
29
|
-
margin_bottom: "md",
|
|
30
|
-
label: "Default"
|
|
31
|
-
}) %>
|
|
32
|
-
|
|
33
|
-
<%= pb_rails("dropdown", props: {
|
|
34
|
-
id: "closeable-subtle",
|
|
35
|
-
options: options,
|
|
36
|
-
clearable: false,
|
|
37
|
-
default_value: options.second,
|
|
38
|
-
variant: "subtle",
|
|
39
|
-
separators: false,
|
|
40
|
-
label: "Subtle"
|
|
41
|
-
}) %>
|
|
42
|
-
|
|
43
|
-
<script>
|
|
44
|
-
function handleReset() {
|
|
45
|
-
const dropdown = document.querySelector("#date-range-quickpick-reset-closeable[data-pb-dropdown]");
|
|
46
|
-
const instance = dropdown?._pbDropdownInstance;
|
|
47
|
-
|
|
48
|
-
if (instance) {
|
|
49
|
-
instance.clearSelection();
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
</script>
|
|
@@ -1,72 +0,0 @@
|
|
|
1
|
-
import React, { useRef } from 'react'
|
|
2
|
-
|
|
3
|
-
import Button from '../../pb_button/_button'
|
|
4
|
-
import Dropdown from '../../pb_dropdown/_dropdown'
|
|
5
|
-
|
|
6
|
-
const DropdownWithClearable = (props) => {
|
|
7
|
-
const dropdownRef = useRef(null)
|
|
8
|
-
|
|
9
|
-
const options = [
|
|
10
|
-
{
|
|
11
|
-
label: "United States",
|
|
12
|
-
value: "unitedStates",
|
|
13
|
-
id: "us"
|
|
14
|
-
},
|
|
15
|
-
{
|
|
16
|
-
label: "Canada",
|
|
17
|
-
value: "canada",
|
|
18
|
-
id: "ca"
|
|
19
|
-
},
|
|
20
|
-
{
|
|
21
|
-
label: "Pakistan",
|
|
22
|
-
value: "pakistan",
|
|
23
|
-
id: "pk"
|
|
24
|
-
}
|
|
25
|
-
]
|
|
26
|
-
|
|
27
|
-
const handleReset = () => {
|
|
28
|
-
if (dropdownRef.current) {
|
|
29
|
-
dropdownRef.current.clearSelected()
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
return (
|
|
34
|
-
<>
|
|
35
|
-
<Dropdown
|
|
36
|
-
clearable={false}
|
|
37
|
-
label="Quick Pick"
|
|
38
|
-
onSelect={() => {}}
|
|
39
|
-
ref={dropdownRef}
|
|
40
|
-
variant="quickpick"
|
|
41
|
-
{...props}
|
|
42
|
-
/>
|
|
43
|
-
<Button
|
|
44
|
-
marginY="md"
|
|
45
|
-
onClick={handleReset}
|
|
46
|
-
text="Reset"
|
|
47
|
-
/>
|
|
48
|
-
|
|
49
|
-
<Dropdown
|
|
50
|
-
clearable={false}
|
|
51
|
-
defaultValue={options[options.length - 1]}
|
|
52
|
-
label="Default"
|
|
53
|
-
marginBottom="md"
|
|
54
|
-
options={options}
|
|
55
|
-
variant="default"
|
|
56
|
-
{...props}
|
|
57
|
-
/>
|
|
58
|
-
|
|
59
|
-
<Dropdown
|
|
60
|
-
clearable={false}
|
|
61
|
-
defaultValue={options[1]}
|
|
62
|
-
label="Subtle"
|
|
63
|
-
options={options}
|
|
64
|
-
separators={false}
|
|
65
|
-
variant="subtle"
|
|
66
|
-
{...props}
|
|
67
|
-
/>
|
|
68
|
-
</>
|
|
69
|
-
)
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
export default DropdownWithClearable
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
The `clearable` prop controls whether the clear (X) button appears in the dropdown. When set to `false`, the clear button is hidden.
|
|
2
|
-
|
|
3
|
-
This is useful in two scenarios:
|
|
4
|
-
1. When you have a separate "Reset" or "Defaults" button that handles clearing the selection (as shown in the Quick Pick example)
|
|
5
|
-
2. When you don't want to provide any way to clear the selection (as shown in the Default and Subtle examples)
|
|
@@ -1,9 +0,0 @@
|
|
|
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: { options: options, placeholder: "Choose a country" }) %>
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import Dropdown from '../../pb_dropdown/_dropdown'
|
|
3
|
-
|
|
4
|
-
const DropdownWithPlaceholder = (props) => {
|
|
5
|
-
|
|
6
|
-
const options = [
|
|
7
|
-
{
|
|
8
|
-
label: "United States",
|
|
9
|
-
value: "unitedStates",
|
|
10
|
-
id: "us"
|
|
11
|
-
},
|
|
12
|
-
{
|
|
13
|
-
label: "Canada",
|
|
14
|
-
value: "canada",
|
|
15
|
-
id: "ca"
|
|
16
|
-
},
|
|
17
|
-
{
|
|
18
|
-
label: "Pakistan",
|
|
19
|
-
value: "pakistan",
|
|
20
|
-
id: "pk"
|
|
21
|
-
}
|
|
22
|
-
];
|
|
23
|
-
|
|
24
|
-
return (
|
|
25
|
-
<Dropdown
|
|
26
|
-
options={options}
|
|
27
|
-
placeholder="Choose a country"
|
|
28
|
-
{...props}
|
|
29
|
-
/>
|
|
30
|
-
)
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
export default DropdownWithPlaceholder
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
The `placeholder` prop allows you to customize the placeholder text that appears when no option is selected in the dropdown.
|
|
2
|
-
|
|
3
|
-
The placeholder prop works with all dropdown variants (`default`, `subtle`, and `quickpick`). When no option is selected, the placeholder text is displayed. When an option is selected, the placeholder is replaced by the selected option's label. The default placeholder text is "Select..." if no placeholder is provided.
|
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_input_display.html.erb
DELETED
|
@@ -1,74 +0,0 @@
|
|
|
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: "multi-level-select-input-display-none",
|
|
69
|
-
name: :foo,
|
|
70
|
-
tree_data: treeData,
|
|
71
|
-
input_display: "none",
|
|
72
|
-
return_all_selected: true,
|
|
73
|
-
})
|
|
74
|
-
%>
|
|
@@ -1,87 +0,0 @@
|
|
|
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 MultiLevelSelectInputDisplay = (props) => {
|
|
73
|
-
return (
|
|
74
|
-
<MultiLevelSelect
|
|
75
|
-
id="multi-level-select-input-display-none"
|
|
76
|
-
inputDisplay="none"
|
|
77
|
-
onSelect={(selectedNodes) =>
|
|
78
|
-
console.log("Selected Items", selectedNodes)
|
|
79
|
-
}
|
|
80
|
-
returnAllSelected
|
|
81
|
-
treeData={treeData}
|
|
82
|
-
{...props}
|
|
83
|
-
/>
|
|
84
|
-
);
|
|
85
|
-
};
|
|
86
|
-
|
|
87
|
-
export default MultiLevelSelectInputDisplay;
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
Use the `inputDisplay`/`input_display` prop to optionally display only the count in the display as opposed to multiple pills. This prop is set to 'pills' by default.
|
|
2
|
-
|
|
3
|
-
**NOTE**: `inputDisplay`/`input_display` is particularly useful for larger trees that may return many pill selections, helping to keep the input field clean and compact. This prop should not be used with the Single Select variant.
|
data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_required_indicator.jsx
DELETED
|
@@ -1,35 +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 RichTextEditorAdvancedRequiredIndicator = (props) => {
|
|
9
|
-
|
|
10
|
-
const editor = useEditor({
|
|
11
|
-
extensions: [
|
|
12
|
-
StarterKit,
|
|
13
|
-
Link
|
|
14
|
-
],
|
|
15
|
-
content:"Add your text here. You can format your text, add links, quotes, and bullets."
|
|
16
|
-
})
|
|
17
|
-
if (!editor) {
|
|
18
|
-
return null
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
return (
|
|
22
|
-
<div>
|
|
23
|
-
<RichTextEditor
|
|
24
|
-
advancedEditor={editor}
|
|
25
|
-
label="Label"
|
|
26
|
-
requiredIndicator
|
|
27
|
-
{...props}
|
|
28
|
-
>
|
|
29
|
-
<EditorContent editor={editor}/>
|
|
30
|
-
</RichTextEditor>
|
|
31
|
-
</div>
|
|
32
|
-
)
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
export default RichTextEditorAdvancedRequiredIndicator
|
data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_required_indicator.md
DELETED
|
@@ -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.
|
data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.html.erb
DELETED
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
<%= pb_rails("rich_text_editor", props: {
|
|
2
|
-
id: "required-indicator",
|
|
3
|
-
input_options: {
|
|
4
|
-
id: 'hidden_input_id',
|
|
5
|
-
name: "hidden_input_name"
|
|
6
|
-
},
|
|
7
|
-
label: "Label",
|
|
8
|
-
required_indicator: true,
|
|
9
|
-
value: "Add your text here. You can format your text, add links, quotes, and bullets."
|
|
10
|
-
}) %>
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import React, { useState } from 'react'
|
|
2
|
-
import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
|
|
3
|
-
|
|
4
|
-
const RichTextEditorRequiredIndicator = (props) => {
|
|
5
|
-
const [value, setValue] = useState('Add your text here. You can format your text, add links, quotes, and bullets.'),
|
|
6
|
-
handleOnChange = (html) => setValue(html)
|
|
7
|
-
|
|
8
|
-
return (
|
|
9
|
-
<div>
|
|
10
|
-
<RichTextEditor
|
|
11
|
-
label="Label"
|
|
12
|
-
onChange={handleOnChange}
|
|
13
|
-
requiredIndicator
|
|
14
|
-
value={value}
|
|
15
|
-
{...props}
|
|
16
|
-
/>
|
|
17
|
-
</div>
|
|
18
|
-
)
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
export default RichTextEditorRequiredIndicator
|
|
@@ -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,68 +0,0 @@
|
|
|
1
|
-
sections:
|
|
2
|
-
- title: "Size & Density"
|
|
3
|
-
examples:
|
|
4
|
-
- table_sm
|
|
5
|
-
- table_md
|
|
6
|
-
- table_lg
|
|
7
|
-
- table_multiline
|
|
8
|
-
- table_single_line
|
|
9
|
-
- table_outer_padding
|
|
10
|
-
|
|
11
|
-
- title: "Layout & Structure"
|
|
12
|
-
examples:
|
|
13
|
-
- table_responsive_table
|
|
14
|
-
- table_with_subcomponents
|
|
15
|
-
- table_with_subcomponents_as_divs
|
|
16
|
-
- table_with_background_kit
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
- title: "Sticky & Positional Behaviors"
|
|
20
|
-
examples:
|
|
21
|
-
- table_sticky
|
|
22
|
-
- table_sticky_left_columns
|
|
23
|
-
- table_sticky_right_columns
|
|
24
|
-
- table_sticky_columns
|
|
25
|
-
- table_alignment_row
|
|
26
|
-
- table_alignment_column
|
|
27
|
-
- table_alignment_shift_row
|
|
28
|
-
- table_alignment_shift_data
|
|
29
|
-
- table_side_highlight
|
|
30
|
-
- table_container
|
|
31
|
-
|
|
32
|
-
- title: "Collapsible & Nested Behaviors"
|
|
33
|
-
examples:
|
|
34
|
-
- table_with_collapsible
|
|
35
|
-
- table_with_dynamic_collapsible
|
|
36
|
-
- table_with_collapsible_with_custom_click
|
|
37
|
-
- table_with_collapsible_with_custom_content
|
|
38
|
-
- table_with_collapsible_with_nested_rows
|
|
39
|
-
- table_with_collapsible_with_nested_table
|
|
40
|
-
|
|
41
|
-
- title: "Data Presentation"
|
|
42
|
-
examples:
|
|
43
|
-
- table_data_table
|
|
44
|
-
- table_vertical_border
|
|
45
|
-
- table_striped
|
|
46
|
-
|
|
47
|
-
- title: "Header Variants"
|
|
48
|
-
examples:
|
|
49
|
-
- table_header
|
|
50
|
-
- table_with_header_style_borderless
|
|
51
|
-
- table_with_header_style_floating
|
|
52
|
-
|
|
53
|
-
- title: "Interactive Tables"
|
|
54
|
-
examples:
|
|
55
|
-
- table_with_clickable_rows
|
|
56
|
-
- table_with_selectable_rows
|
|
57
|
-
- table_with_filter_variant
|
|
58
|
-
- table_with_filter_variant_with_pagination
|
|
59
|
-
- table_disable_hover
|
|
60
|
-
|
|
61
|
-
- title: "Table Actions"
|
|
62
|
-
examples:
|
|
63
|
-
- table_one_action
|
|
64
|
-
- table_two_actions
|
|
65
|
-
- table_two_plus_actions
|
|
66
|
-
- table_action_middle
|
|
67
|
-
- table_icon_buttons
|
|
68
|
-
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import React, {useState} from 'react'
|
|
2
|
-
|
|
3
|
-
import Textarea from '../_textarea'
|
|
4
|
-
|
|
5
|
-
const TextareaRequiredIndicator = (props) => {
|
|
6
|
-
const [value, setValue] = useState('Default value text')
|
|
7
|
-
const handleChange = (event) => {
|
|
8
|
-
setValue(event.target.value)
|
|
9
|
-
}
|
|
10
|
-
return (
|
|
11
|
-
<div>
|
|
12
|
-
<Textarea
|
|
13
|
-
label="Label"
|
|
14
|
-
name="comment"
|
|
15
|
-
onChange={(e) => handleChange(e)}
|
|
16
|
-
placeholder="Placeholder text"
|
|
17
|
-
requiredIndicator
|
|
18
|
-
value={value}
|
|
19
|
-
{...props}
|
|
20
|
-
/>
|
|
21
|
-
</div>
|
|
22
|
-
)
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
export default TextareaRequiredIndicator
|
|
@@ -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.
|