playbook_ui_docs 15.7.0.pre.alpha.PLAY2704multilevelselectsingledisabledoptions13404 → 15.7.0.pre.alpha.play2607setheightofeditor13370

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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: b5ce26e398a06da1f730f37708e94a96969057b3a20267d0c3596e634f447cbf
4
- data.tar.gz: 2880e92ee4e07f458cc14ad835021adaf2ac47bb1d4e4e0f9f23720c9855f4cc
3
+ metadata.gz: c9e0cc872bb6ce11bc5820a0dc1a3516adcd0dd0eda9bd4ed0e1bf0c0b1d1e11
4
+ data.tar.gz: 398e66530da3b3e15adb21a58a731e0c4b6e9eafc3b8631a9fcd23e1b5d4f0e0
5
5
  SHA512:
6
- metadata.gz: 28548a312790dec3514df63fd8892421d8a09a156e0e4b6aafa876db5cf0053be3d5af87e9866b17f94205b543358538170db1abf334a2a1234958f8ff89b340
7
- data.tar.gz: f703c34a40a9daa77e21dc386ac01f26aae84e50f74992e11ac355a9f307a3816eeea02557397b59d5a5b1c0889e30198a8d397dd533925590ab0be2b5b219f1
6
+ metadata.gz: 6eb32223f0baf7f673e997fd32545d163e3f44e28a82cc9275c9b140737f7be800ff6ba3379958af43603c406c2d9e2a2b5ec134fc70896799022317d44c690d
7
+ data.tar.gz: 396a761f7d60ced387ba2a3c89f3265860cc3dded8489b96f5b300831d4de559d7046d2bbc76cf6db9cf65800676589824939995175d941fd0ebce7b643bf681
@@ -1 +1 @@
1
- Individual items can also be disabled by including the `disabled:true` within the object on the treeData for the `returnAllSelected`/`return_all_selected` variant. As noted above, this variant will return data on all checked nodes from the dropdown, irrespective of whether it is a parent or child node.
1
+ individual items can also be disabled by including the `disabled:true` within the object on the treeData for the `returnAllSelected`/`return_all_selected` variant. As noted above, this variant will return data on all checked nodes from the dropdown, irrespective of whether it is a parent or child node.
@@ -15,7 +15,6 @@ examples:
15
15
  - multi_level_select_disabled_options: Disabled Options (Return All Selected)
16
16
  - multi_level_select_disabled_options_parent_default: Disabled Parent Option (Default)
17
17
  - multi_level_select_disabled_options_parent: Disabled Parent Option (Return All Selected)
18
- - multi_level_select_single_disabled: Disabled Options (Single Select)
19
18
 
20
19
  react:
21
20
  - multi_level_select_default: Default
@@ -34,4 +33,3 @@ examples:
34
33
  - multi_level_select_disabled_options: Disabled Options (Return All Selected)
35
34
  - multi_level_select_disabled_options_parent_default: Disabled Parent Option (Default)
36
35
  - multi_level_select_disabled_options_parent: Disabled Parent Option (Return All Selected)
37
- - multi_level_select_single_disabled: Disabled Options (Single Select)
@@ -14,4 +14,3 @@ export { default as MultiLevelSelectDisabledOptionsParent } from './_multi_level
14
14
  export { default as MultiLevelSelectDisabledOptionsParentDefault } from './_multi_level_select_disabled_options_parent_default.jsx'
15
15
  export { default as MultiLevelSelectDisabledOptionsDefault } from './_multi_level_select_disabled_options_default.jsx'
16
16
  export { default as MultiLevelSelectLabel } from './_multi_level_select_label.jsx'
17
- export { default as MultiLevelSelectSingleDisabled } from './_multi_level_select_single_disabled.jsx'
@@ -0,0 +1,71 @@
1
+ import React from 'react'
2
+ import RichTextEditor from '../_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
+ import { Caption } from "playbook-ui"
7
+
8
+
9
+ const RichTextEditorAdvancedHeight = (props) => {
10
+
11
+ const editor = useEditor({
12
+ extensions: [
13
+ StarterKit,
14
+ Link
15
+ ],
16
+ content: "Add your text here. You can format your text, add links, quotes, and bullets."
17
+ })
18
+
19
+ const editor2 = useEditor({
20
+ extensions: [
21
+ StarterKit,
22
+ Link
23
+ ],
24
+ content: "Add your text here. You can format your text, add links, quotes, and bullets."
25
+ })
26
+
27
+ const editor3 = useEditor({
28
+ extensions: [
29
+ StarterKit,
30
+ Link
31
+ ],
32
+ content: "Add your text here. You can format your text, add links, quotes, and bullets."
33
+ })
34
+
35
+ return (
36
+ <div>
37
+ <Caption>sm</Caption>
38
+ <RichTextEditor
39
+ advancedEditor={editor}
40
+ inputHeight="sm"
41
+ {...props}
42
+ >
43
+ <EditorContent editor={editor} />
44
+ </RichTextEditor>
45
+
46
+ <br />
47
+
48
+ <Caption>md</Caption>
49
+ <RichTextEditor
50
+ advancedEditor={editor2}
51
+ inputHeight="md"
52
+ {...props}
53
+ >
54
+ <EditorContent editor={editor2} />
55
+ </RichTextEditor>
56
+
57
+ <br />
58
+
59
+ <Caption>lg</Caption>
60
+ <RichTextEditor
61
+ advancedEditor={editor3}
62
+ inputHeight="lg"
63
+ {...props}
64
+ >
65
+ <EditorContent editor={editor3} />
66
+ </RichTextEditor>
67
+ </div>
68
+ )
69
+ }
70
+
71
+ export default RichTextEditorAdvancedHeight
@@ -0,0 +1 @@
1
+ Use the `inputHeight` prop to keep the text area a specific height. If the text exceeds the text area, it will automatically add a scrollbar to maintain the fixed height.
@@ -0,0 +1 @@
1
+ Use the inputMinHeight prop to render the text area with a minimum height. If the text exceeds the text area, the text area will grow to accommodate it.
@@ -0,0 +1,71 @@
1
+ import React from 'react'
2
+ import RichTextEditor from '../_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
+ import { Caption } from "playbook-ui"
7
+
8
+
9
+ const RichTextEditorAdvancedMinHeight = (props) => {
10
+
11
+ const editor1 = useEditor({
12
+ extensions: [
13
+ StarterKit,
14
+ Link
15
+ ],
16
+ content: "Add your text here. You can format your text, add links, quotes, and bullets."
17
+ })
18
+
19
+ const editor2 = useEditor({
20
+ extensions: [
21
+ StarterKit,
22
+ Link
23
+ ],
24
+ content: "Add your text here. You can format your text, add links, quotes, and bullets."
25
+ })
26
+
27
+ const editor3 = useEditor({
28
+ extensions: [
29
+ StarterKit,
30
+ Link
31
+ ],
32
+ content: "Add your text here. You can format your text, add links, quotes, and bullets."
33
+ })
34
+
35
+ return (
36
+ <div>
37
+ <Caption>sm</Caption>
38
+ <RichTextEditor
39
+ advancedEditor={editor1}
40
+ inputMinHeight="sm"
41
+ {...props}
42
+ >
43
+ <EditorContent editor={editor1} />
44
+ </RichTextEditor>
45
+
46
+ <br />
47
+
48
+ <Caption>md</Caption>
49
+ <RichTextEditor
50
+ advancedEditor={editor2}
51
+ inputMinHeight="md"
52
+ {...props}
53
+ >
54
+ <EditorContent editor={editor2} />
55
+ </RichTextEditor>
56
+
57
+ <br />
58
+
59
+ <Caption>lg</Caption>
60
+ <RichTextEditor
61
+ advancedEditor={editor3}
62
+ inputMinHeight="lg"
63
+ {...props}
64
+ >
65
+ <EditorContent editor={editor3} />
66
+ </RichTextEditor>
67
+ </div>
68
+ )
69
+ }
70
+
71
+ export default RichTextEditorAdvancedMinHeight
@@ -29,5 +29,7 @@ examples:
29
29
  # - rich_text_editor_toolbar_bottom: Toolbar Bottom
30
30
  - rich_text_editor_inline: Inline
31
31
  - rich_text_editor_advanced_inline: Advanced (Inline)
32
+ - rich_text_editor_advanced_height: Advanced Height
33
+ - rich_text_editor_advanced_min_height: Advanced Min Height
32
34
  - rich_text_editor_preview: Preview
33
35
  - rich_text_editor_advanced_preview: Advanced Preview
@@ -16,4 +16,6 @@ export { default as RichTextEditorAdvancedFocus } from './_rich_text_editor_adva
16
16
  export { default as RichTextEditorAdvancedTemplates } from './_rich_text_editor_advanced_templates.jsx'
17
17
  export { default as RichTextEditorAdvancedAttributes } from './_rich_text_editor_advanced_attributes.jsx'
18
18
  export { default as RichTextEditorAdvancedSticky } from './_rich_text_editor_advanced_sticky.jsx'
19
- export { default as RichTextEditorAdvancedInline } from './_rich_text_editor_advanced_inline.jsx'
19
+ export { default as RichTextEditorAdvancedInline } from './_rich_text_editor_advanced_inline.jsx'
20
+ export { default as RichTextEditorAdvancedHeight } from './_rich_text_editor_advanced_height.jsx'
21
+ export { default as RichTextEditorAdvancedMinHeight } from './_rich_text_editor_advanced_min_height.jsx'
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui_docs
3
3
  version: !ruby/object:Gem::Version
4
- version: 15.7.0.pre.alpha.PLAY2704multilevelselectsingledisabledoptions13404
4
+ version: 15.7.0.pre.alpha.play2607setheightofeditor13370
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-08 00:00:00.000000000 Z
12
+ date: 2026-01-07 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: playbook_ui
@@ -1536,9 +1536,6 @@ files:
1536
1536
  - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.html.erb
1537
1537
  - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.jsx
1538
1538
  - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.md
1539
- - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_disabled.html.erb
1540
- - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_disabled.jsx
1541
- - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_disabled.md
1542
1539
  - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.jsx
1543
1540
  - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.md
1544
1541
  - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.jsx
@@ -2006,8 +2003,12 @@ files:
2006
2003
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_default.md
2007
2004
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_focus.jsx
2008
2005
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_focus.md
2006
+ - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_height.jsx
2007
+ - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_height.md
2009
2008
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_inline.jsx
2010
2009
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_inline.md
2010
+ - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_min_heigh.md
2011
+ - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_min_height.jsx
2011
2012
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_preview.jsx
2012
2013
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_simple.jsx
2013
2014
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_sticky.jsx
@@ -1,135 +0,0 @@
1
- <% treeData = [
2
- {
3
- label: "HQ",
4
- value: "hQ",
5
- id: "hq2",
6
- },
7
- {
8
- label: "Philadelphia",
9
- value: "philadelphia",
10
- id: "phl2",
11
- disabled: true,
12
- children: [
13
- {
14
- label: "Marketing & Sales PHL",
15
- value: "marketingAndSalesPhl",
16
- id: "marketingPHL2",
17
- },
18
- {
19
- label: "Installation Office PHL",
20
- value: "installationOfficePhl",
21
- id: "installationPHL2",
22
- },
23
- {
24
- label: "Warehouse PHL",
25
- value: "warehousePhl",
26
- id: "warehousePHL2",
27
- },
28
- ]
29
- },
30
- {
31
- label: "New Jersey",
32
- value: "newJersey",
33
- id: "nj2",
34
- children: [
35
- {
36
- label: "New Jersey",
37
- value: "newJersey",
38
- id: "nj12",
39
- children: [
40
- {
41
- label: "Marketing & Sales NJ",
42
- value: "marketingAndSalesNj",
43
- id: "marketingNJ2",
44
- disabled: true,
45
- },
46
- {
47
- label: "Installation Office NJ",
48
- value: "installationOfficeNj",
49
- id: "installationNJ2",
50
- },
51
- {
52
- label: "Warehouse NJ",
53
- value: "warehouseNj",
54
- id: "warehouseNJ2",
55
- },
56
- ],
57
- },
58
- {
59
- label: "Princeton",
60
- value: "princeton",
61
- id: "princeton2",
62
- children: [
63
- {
64
- label: "Marketing & Sales Princeton",
65
- value: "marketingAndSalesPrinceton",
66
- id: "marketingPR2",
67
- },
68
- {
69
- label: "Installation Office Princeton",
70
- value: "installationOfficePrinceton",
71
- id: "installationPR2",
72
- disabled: true,
73
- },
74
- {
75
- label: "Warehouse Princeton",
76
- value: "warehousePrinceton",
77
- id: "warehousePR2",
78
- },
79
- ]
80
- },
81
- ]
82
- },
83
- {
84
- label: "Maryland",
85
- value: "maryland",
86
- id: "MD2",
87
- children: [
88
- {
89
- label: "Marketing & Sales MD",
90
- value: "marketingAndSalesMd",
91
- id: "marketingMD2",
92
- },
93
- {
94
- label: "Installation Office MD",
95
- value: "installationOfficeMd",
96
- id: "installationMD2",
97
- },
98
- {
99
- label: "Warehouse MD",
100
- value: "warehouseMd",
101
- id: "warehouseMD2",
102
- },
103
- ]
104
- },
105
- {
106
- label: "Connecticut",
107
- value: "connecticut",
108
- id: "CT2",
109
- children: [
110
- {
111
- label: "Marketing & Sales CT",
112
- value: "marketingAndSalesCt",
113
- id: "marketingCT2",
114
- },
115
- {
116
- label: "Installation Office CT",
117
- value: "installationOfficeCt",
118
- id: "installationCT2",
119
- },
120
- {
121
- label: "Warehouse CT",
122
- value: "warehouseCt",
123
- id: "warehouseCT2",
124
- },
125
- ]
126
- },
127
- ] %>
128
-
129
- <%= pb_rails("multi_level_select", props: {
130
- id: "multi-level-select-single-disabled-rails",
131
- name: "single_disabled",
132
- tree_data: treeData,
133
- input_name: "Power",
134
- variant: "single"
135
- }) %>
@@ -1,147 +0,0 @@
1
- import React from "react";
2
- import MultiLevelSelect from "../_multi_level_select";
3
-
4
- const treeData = [
5
- {
6
- label: "HQ",
7
- value: "hQ",
8
- id: "hq2",
9
- },
10
- {
11
- label: "Philadelphia",
12
- value: "philadelphia",
13
- id: "phl2",
14
- disabled: true,
15
- children: [
16
- {
17
- label: "Marketing & Sales PHL",
18
- value: "marketingAndSalesPhl",
19
- id: "marketingPHL2",
20
- },
21
- {
22
- label: "Installation Office PHL",
23
- value: "installationOfficePhl",
24
- id: "installationPHL2",
25
- },
26
- {
27
- label: "Warehouse PHL",
28
- value: "warehousePhl",
29
- id: "warehousePHL2",
30
- },
31
- ]
32
- },
33
- {
34
- label: "New Jersey",
35
- value: "newJersey",
36
- id: "nj2",
37
- children: [
38
- {
39
- label: "New Jersey",
40
- value: "newJersey",
41
- id: "nj12",
42
- children: [
43
- {
44
- label: "Marketing & Sales NJ",
45
- value: "marketingAndSalesNj",
46
- id: "marketingNJ2",
47
- disabled: true,
48
- },
49
- {
50
- label: "Installation Office NJ",
51
- value: "installationOfficeNj",
52
- id: "installationNJ2",
53
- },
54
- {
55
- label: "Warehouse NJ",
56
- value: "warehouseNj",
57
- id: "warehouseNJ2",
58
- },
59
- ],
60
- },
61
- {
62
- label: "Princeton",
63
- value: "princeton",
64
- id: "princeton2",
65
- children: [
66
- {
67
- label: "Marketing & Sales Princeton",
68
- value: "marketingAndSalesPrinceton",
69
- id: "marketingPR2",
70
- },
71
- {
72
- label: "Installation Office Princeton",
73
- value: "installationOfficePrinceton",
74
- id: "installationPR2",
75
- disabled: true,
76
- },
77
- {
78
- label: "Warehouse Princeton",
79
- value: "warehousePrinceton",
80
- id: "warehousePR2",
81
- },
82
- ]
83
- },
84
- ]
85
- },
86
- {
87
- label: "Maryland",
88
- value: "maryland",
89
- id: "MD2",
90
- children: [
91
- {
92
- label: "Marketing & Sales MD",
93
- value: "marketingAndSalesMd",
94
- id: "marketingMD2",
95
- },
96
- {
97
- label: "Installation Office MD",
98
- value: "installationOfficeMd",
99
- id: "installationMD2",
100
- },
101
- {
102
- label: "Warehouse MD",
103
- value: "warehouseMd",
104
- id: "warehouseMD2",
105
- },
106
- ]
107
- },
108
- {
109
- label: "Connecticut",
110
- value: "connecticut",
111
- id: "CT2",
112
- children: [
113
- {
114
- label: "Marketing & Sales CT",
115
- value: "marketingAndSalesCt",
116
- id: "marketingCT2",
117
- },
118
- {
119
- label: "Installation Office CT",
120
- value: "installationOfficeCt",
121
- id: "installationCT2",
122
- },
123
- {
124
- label: "Warehouse CT",
125
- value: "warehouseCt",
126
- id: "warehouseCT2",
127
- },
128
- ]
129
- },
130
- ];
131
-
132
- const MultiLevelSelectSingleDisabled = (props) => {
133
- return (
134
- <div>
135
- <MultiLevelSelect
136
- id="multiselect-single-disabled"
137
- inputName="Power"
138
- onSelect={(selectedNode) => console.log("Selected Node", selectedNode)}
139
- treeData={treeData}
140
- variant="single"
141
- {...props}
142
- />
143
- </div>
144
- )
145
- };
146
-
147
- export default MultiLevelSelectSingleDisabled;
@@ -1 +0,0 @@
1
- Individual items can be disabled by including `disabled: true` within the object on the treeData for the `single` variant. Disabled options are visibly disabled in the dropdown UI and cannot be selected via mouse click or keyboard navigation. When a parent node is disabled, all of its children are automatically disabled as well.