playbook_ui_docs 16.1.0.pre.alpha.play264213818 → 16.1.0.pre.rc.0
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_card/docs/_card_light.html.erb +3 -35
- 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_multiple_users/docs/_multiple_users_with_tooltip.jsx +1 -1
- data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.md +1 -1
- data/app/pb_kits/playbook/pb_multiple_users/docs/example.yml +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/example.yml +1 -4
- data/app/pb_kits/playbook/pb_textarea/docs/index.js +0 -1
- metadata +2 -21
- 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_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_multiple_users/docs/_multiple_users_with_tooltip.html.erb +0 -30
- 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_input_options.html.erb +0 -39
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_input_options.md +0 -3
- 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: 1a500947d189faf49975a04214fc6a7777068bb6e97e701b56120716e8ea496e
|
|
4
|
+
data.tar.gz: cda73d66b6a43912b4729d9852e46fcd1521e4066b79f1b60a4290b8bbb6a256
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: df07ec138ac3b2a63260de43aa35051bc3fd6d8cbbba11989e789d02a486092763e936cf69c6856145cacf3b1197f0486b83dad239885c842e8165071b86428e
|
|
7
|
+
data.tar.gz: 1e2254818a11b43ce09a4dc1c319abaa7fa1be93a793d5917be95d5d966f9da7e5f345d9d895e03982b956df10874fddab545066849d30cdbf32fa81bbc6b3e4
|
|
@@ -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'
|
|
@@ -1,36 +1,4 @@
|
|
|
1
|
-
<%= pb_rails("
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
}) do %>
|
|
5
|
-
|
|
6
|
-
<%= pb_rails("caption", props: { text: "flex direction responsive: row on md + xl, column as default" }) %>
|
|
7
|
-
<%= pb_rails("card", props: {
|
|
8
|
-
flex_direction: { default: "column", md: "row", xl:"row" }
|
|
9
|
-
}) do %>
|
|
10
|
-
<%= pb_rails("body", props: { text: "Item 1", color: "default" }) %>
|
|
11
|
-
<%= pb_rails("body", props: { text: "Item 2", color: "default" }) %>
|
|
12
|
-
<%= pb_rails("body", props: { text: "Item 3", color: "default" }) %>
|
|
13
|
-
<% end %>
|
|
14
|
-
|
|
15
|
-
<%= pb_rails("caption", props: { text: "align items responsive: start on default, center on md, end on lg" }) %>
|
|
16
|
-
<%= pb_rails("card", props: {
|
|
17
|
-
display: "flex",
|
|
18
|
-
flex_direction: "row",
|
|
19
|
-
align_items: { default: "start", md: "center", lg: "end" },
|
|
20
|
-
}) do %>
|
|
21
|
-
<%= pb_rails("card", props: {height:"xs" }) do %> Card 1 <% end %>
|
|
22
|
-
<%= pb_rails("card", props: { height:"sm" }) do %> Card 2 <% end %>
|
|
23
|
-
<%= pb_rails("card", props: { height:"xs" }) do %> Card 3 <% end %>
|
|
24
|
-
<% end %>
|
|
25
|
-
|
|
26
|
-
<%= pb_rails("caption", props: { text: "Text Align responsive: left on default, center on md, right on lg" }) %>
|
|
27
|
-
<%= pb_rails("card", props: {
|
|
28
|
-
text_align: { default: "left", md: "center", lg: "right" },
|
|
29
|
-
width: "100%"
|
|
30
|
-
}) do %>
|
|
31
|
-
<%= pb_rails("body", props: { }) do %> text 1 <% end %>
|
|
32
|
-
<%= pb_rails("body", props: { }) do %> text 2 <% end %>
|
|
33
|
-
<%= pb_rails("body", props: { }) do %> text 3 <% end %>
|
|
34
|
-
<% end %>
|
|
1
|
+
<%= pb_rails("card", props: {
|
|
2
|
+
}) do %>
|
|
3
|
+
Card content
|
|
35
4
|
<% end %>
|
|
36
|
-
|
|
@@ -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'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
Use the `withTooltip`
|
|
1
|
+
Use the `withTooltip` boolean prop to enable setting user-specific tooltip content via the `tooltip` property in the users array.
|
|
@@ -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'
|
|
@@ -8,8 +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
|
-
- textarea_input_options: Input Options
|
|
13
11
|
|
|
14
12
|
react:
|
|
15
13
|
- textarea_default: Default
|
|
@@ -19,9 +17,8 @@ examples:
|
|
|
19
17
|
- textarea_character_counter: Character Counter
|
|
20
18
|
- textarea_inline: Inline
|
|
21
19
|
- textarea_emoji_mask: Emoji Mask
|
|
22
|
-
- textarea_required_indicator: Required Indicator
|
|
23
20
|
|
|
24
21
|
swift:
|
|
25
22
|
- textarea_default_swift: Default
|
|
26
23
|
- textarea_error_swift: Textarea w/ Error
|
|
27
|
-
- textarea_props_swift: ""
|
|
24
|
+
- 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.1.0.pre.
|
|
4
|
+
version: 16.1.0.pre.rc.0
|
|
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-12 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
|
|
@@ -1411,9 +1407,6 @@ files:
|
|
|
1411
1407
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent_default.md
|
|
1412
1408
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_error.html.erb
|
|
1413
1409
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_error.jsx
|
|
1414
|
-
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_input_display.html.erb
|
|
1415
|
-
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_input_display.jsx
|
|
1416
|
-
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_input_display.md
|
|
1417
1410
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.html.erb
|
|
1418
1411
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.jsx
|
|
1419
1412
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.jsx
|
|
@@ -1458,7 +1451,6 @@ files:
|
|
|
1458
1451
|
- app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size.jsx
|
|
1459
1452
|
- app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size.md
|
|
1460
1453
|
- app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size_swift.md
|
|
1461
|
-
- app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.html.erb
|
|
1462
1454
|
- app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.jsx
|
|
1463
1455
|
- app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.md
|
|
1464
1456
|
- app/pb_kits/playbook/pb_multiple_users/docs/example.yml
|
|
@@ -1914,8 +1906,6 @@ files:
|
|
|
1914
1906
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_min_height.jsx
|
|
1915
1907
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_min_height.md
|
|
1916
1908
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_preview.jsx
|
|
1917
|
-
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_required_indicator.jsx
|
|
1918
|
-
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_required_indicator.md
|
|
1919
1909
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_simple.jsx
|
|
1920
1910
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_sticky.jsx
|
|
1921
1911
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_sticky.md
|
|
@@ -1933,9 +1923,6 @@ files:
|
|
|
1933
1923
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.md
|
|
1934
1924
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb
|
|
1935
1925
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.jsx
|
|
1936
|
-
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.html.erb
|
|
1937
|
-
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.jsx
|
|
1938
|
-
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.md
|
|
1939
1926
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.html.erb
|
|
1940
1927
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.jsx
|
|
1941
1928
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_sticky.html.erb
|
|
@@ -2136,7 +2123,6 @@ files:
|
|
|
2136
2123
|
- app/pb_kits/playbook/pb_stat_value/docs/example.yml
|
|
2137
2124
|
- app/pb_kits/playbook/pb_stat_value/docs/index.js
|
|
2138
2125
|
- app/pb_kits/playbook/pb_table/docs/_description.md
|
|
2139
|
-
- app/pb_kits/playbook/pb_table/docs/_sections.yml
|
|
2140
2126
|
- app/pb_kits/playbook/pb_table/docs/_table_action_middle.html.erb
|
|
2141
2127
|
- app/pb_kits/playbook/pb_table/docs/_table_action_middle.jsx
|
|
2142
2128
|
- app/pb_kits/playbook/pb_table/docs/_table_action_middle.md
|
|
@@ -2335,12 +2321,7 @@ files:
|
|
|
2335
2321
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_error_swift.md
|
|
2336
2322
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_inline.html.erb
|
|
2337
2323
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_inline.jsx
|
|
2338
|
-
- app/pb_kits/playbook/pb_textarea/docs/_textarea_input_options.html.erb
|
|
2339
|
-
- app/pb_kits/playbook/pb_textarea/docs/_textarea_input_options.md
|
|
2340
2324
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_props_swift.md
|
|
2341
|
-
- app/pb_kits/playbook/pb_textarea/docs/_textarea_required_indicator.html.erb
|
|
2342
|
-
- app/pb_kits/playbook/pb_textarea/docs/_textarea_required_indicator.jsx
|
|
2343
|
-
- app/pb_kits/playbook/pb_textarea/docs/_textarea_required_indicator.md
|
|
2344
2325
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_resize.html.erb
|
|
2345
2326
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_resize.jsx
|
|
2346
2327
|
- 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`.
|
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.
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
<%= pb_rails("multiple_users", props: {
|
|
2
|
-
with_tooltip: true,
|
|
3
|
-
users: [
|
|
4
|
-
{
|
|
5
|
-
name: "Patrick Welch",
|
|
6
|
-
image_url: "https://randomuser.me/api/portraits/men/9.jpg",
|
|
7
|
-
tooltip: "Patrick Welch - Online"
|
|
8
|
-
},
|
|
9
|
-
{
|
|
10
|
-
name: "Lucille Sanchez",
|
|
11
|
-
image_url: "https://randomuser.me/api/portraits/women/6.jpg",
|
|
12
|
-
tooltip: "Lucille Sanchez - Offline"
|
|
13
|
-
},
|
|
14
|
-
{
|
|
15
|
-
name: "Beverly Reyes",
|
|
16
|
-
image_url: "https://randomuser.me/api/portraits/women/74.jpg",
|
|
17
|
-
tooltip: "Beverly Reyes - Online"
|
|
18
|
-
},
|
|
19
|
-
{
|
|
20
|
-
name: "Keith Craig",
|
|
21
|
-
image_url: "https://randomuser.me/api/portraits/men/40.jpg",
|
|
22
|
-
tooltip: "Keith Craig - Away"
|
|
23
|
-
},
|
|
24
|
-
{
|
|
25
|
-
name: "Alicia Cooper",
|
|
26
|
-
image_url: "https://randomuser.me/api/portraits/women/46.jpg",
|
|
27
|
-
tooltip: "Alicia Cooper - Busy"
|
|
28
|
-
}
|
|
29
|
-
]
|
|
30
|
-
}) %>
|
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,39 +0,0 @@
|
|
|
1
|
-
<%= pb_rails("textarea", props: {
|
|
2
|
-
label: "ID on Container",
|
|
3
|
-
id: "container-id",
|
|
4
|
-
name: "comment",
|
|
5
|
-
rows: 4
|
|
6
|
-
}) %>
|
|
7
|
-
|
|
8
|
-
<br/>
|
|
9
|
-
|
|
10
|
-
<%= pb_rails("textarea", props: {
|
|
11
|
-
label: "ID on Textarea via input_options",
|
|
12
|
-
input_options: { id: "textarea-id" },
|
|
13
|
-
name: "comment",
|
|
14
|
-
rows: 4
|
|
15
|
-
}) %>
|
|
16
|
-
|
|
17
|
-
<br/>
|
|
18
|
-
|
|
19
|
-
<%= pb_rails("textarea", props: {
|
|
20
|
-
label: "Both Container and Textarea IDs",
|
|
21
|
-
id: "container-id-2",
|
|
22
|
-
input_options: { id: "textarea-id-2" },
|
|
23
|
-
name: "comment",
|
|
24
|
-
rows: 4
|
|
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 +0,0 @@
|
|
|
1
|
-
Use the `input_options` / `inputOptions` prop to pass additional attributes directly to the underlying `<textarea>` element instead of the outer wrapper. This is useful for applying data attributes, custom IDs, ARIA attributes, or other HTML attributes that need to be on the textarea element itself.
|
|
2
|
-
|
|
3
|
-
Additional HTML attributes (e.g. data or ARIA attributes) can also be passed directly to the `<textarea>` via `input_options`.
|
|
@@ -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.
|