playbook_ui_docs 15.8.0.pre.rc.0 → 15.8.0.pre.rc.1

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: a1da1d6d1ef24651b4b2d68d7d6fb4d24418a93237ede041deab2386aad9590e
4
- data.tar.gz: 8bc4c34d0ed65dc094b8cf3e187a99af9a0f947df3eafd56973a9b2781a8486a
3
+ metadata.gz: a612c6c091108d9138ab2347e702724f60e3552d290ed4906963d21670aa6640
4
+ data.tar.gz: be4708b10ee105fb088c285bd02258a5dd0a82c80facd06d1206981035c3b227
5
5
  SHA512:
6
- metadata.gz: b518dbb81c1684003780e9e096dccbc0bc428511d31e0a8a74dc2847a33ab84cc8283a84ae76731bfe34a622e7da2e03fe081fa421c966320734399a4ea9d902
7
- data.tar.gz: 685a9397116fbd96752f7294021be526cbcea9c12cb174f5a9579797bd28e50a08b0ce90b4947550318b2d64d153867274ad367adcdbb9154666d02fa3248d8b
6
+ metadata.gz: 181954b1ed65ad06151aa58630e13d047949e1473c25b74e7b71b458a180727a7da624f7bc5a56796249a0350d869c2fda91788ca5bcf66f75c0f7ba74cf798f
7
+ data.tar.gz: f5f298f097108651578094e2fe4b15b6f1609eef7958c3f02a4674a4b989cc795beea1c84bbdb0f36983d6780bc349515665c19d5176c69d231e9b65d3acf561
@@ -0,0 +1,56 @@
1
+ import React from "react"
2
+ import Dropdown from "../_dropdown"
3
+
4
+ const DropdownQuickpickCustom = (props) => (
5
+ <div>
6
+ <Dropdown
7
+ customQuickPickDates={{
8
+ dates: [
9
+ // Allow Playbook to handle the logic...
10
+ {
11
+ label: "Last 15 months",
12
+ value: {
13
+ timePeriod: "months",
14
+ amount: 15,
15
+ },
16
+ },
17
+ // Or, be explicit with an exact date range for more control...
18
+ {
19
+ label: "First Week of June 2022",
20
+ value: ["06/01/2022", "06/07/2022"],
21
+ },
22
+ ],
23
+ }}
24
+ label="Date Range"
25
+ marginBottom="sm"
26
+ onSelect={(selectedItem) => console.log(selectedItem)}
27
+ variant="quickpick"
28
+ {...props}
29
+ />
30
+ <Dropdown
31
+ customQuickPickDates={{
32
+ dates: [
33
+ {
34
+ label: "Last 15 months",
35
+ value: {
36
+ timePeriod: "months",
37
+ amount: 15,
38
+ },
39
+ },
40
+ {
41
+ label: "First Week of June 2022",
42
+ value: ["06/01/2022", "06/07/2022"],
43
+ },
44
+ ],
45
+ override: false,
46
+ }}
47
+ label="Date Range - Append to Defaults"
48
+ onSelect={(selectedItem) => console.log(selectedItem)}
49
+ variant="quickpick"
50
+ {...props}
51
+ />
52
+ </div>
53
+ )
54
+
55
+ export default DropdownQuickpickCustom
56
+
@@ -0,0 +1,10 @@
1
+ The `customQuickPickDates` prop allows for defining custom quick pick date options for the dropdown. The prop accepts an object with two properties: `dates` and `override`.
2
+
3
+ **The `dates` property** accepts an array of objects. Each object has `label` and `value` properties. The `label` is what will be displayed in the dropdown menu. The `value` property defines the date range that will be selected, and can be:
4
+ - An array of two date strings representing a specific range (e.g., `["06/01/2022", "06/07/2022"]`)
5
+ - An object with `timePeriod` and `amount` properties for dynamic date calculations:
6
+ - The `timePeriod` property accepts `"days"`, `"weeks"`, `"months"`, `"quarters"`, or `"years"`, representing past time periods calculated from today.
7
+ - The `amount` property accepts any number.
8
+
9
+ **The `override` property** is a boolean that controls whether custom dates replace or append to the default quick pick options. Default is `true` (replaces defaults). Set to `false` to append your custom dates to the default quick pick options.
10
+
@@ -0,0 +1,64 @@
1
+ <%= pb_rails("dropdown", props: {
2
+ custom_quick_pick_dates: {
3
+ dates: [
4
+ # Allow Playbook to handle the logic...
5
+ {
6
+ label: "Last 15 months",
7
+ value: {
8
+ time_period: "months",
9
+ amount: 15
10
+ }
11
+ },
12
+ # Or, be explicit with an exact date range for more control...
13
+ {
14
+ label: "First Week of June 2022",
15
+ value: ["06/01/2022", "06/07/2022"]
16
+ }
17
+ ]
18
+ },
19
+ id: "date-range-quickpick-custom",
20
+ label: "Date Range",
21
+ margin_bottom: "sm",
22
+ variant: "quickpick"
23
+ }) %>
24
+
25
+ <%= pb_rails("dropdown", props: {
26
+ custom_quick_pick_dates: {
27
+ override: false,
28
+ dates: [
29
+ {
30
+ label: "Last 15 months",
31
+ value: {
32
+ time_period: "months",
33
+ amount: 15
34
+ }
35
+ },
36
+ {
37
+ label: "First Week of June 2022",
38
+ value: ["06/01/2022", "06/07/2022"]
39
+ }
40
+ ]
41
+ },
42
+ id: "date-range-quickpick-custom-append-to-defaults",
43
+ label: "Date Range - Append to Defaults",
44
+ variant: "quickpick"
45
+ }) %>
46
+
47
+ <script>
48
+ const dropdown1 = document.getElementById("date-range-quickpick-custom");
49
+ if (dropdown1) {
50
+ dropdown1.addEventListener("pb:dropdown:selected", (e) => {
51
+ const option = e.detail;
52
+ console.log("Selected option:", option);
53
+ });
54
+ }
55
+
56
+ const dropdown2 = document.getElementById("date-range-quickpick-custom-append-to-defaults");
57
+ if (dropdown2) {
58
+ dropdown2.addEventListener("pb:dropdown:selected", (e) => {
59
+ const option = e.detail;
60
+ console.log("Selected option:", option);
61
+ });
62
+ }
63
+ </script>
64
+
@@ -0,0 +1,10 @@
1
+ The `custom_quick_pick_dates` prop allows for defining custom quick pick date options for the dropdown. The prop accepts an object with two properties: `dates` and `override`.
2
+
3
+ **The `dates` property** accepts an array of objects. Each object has `label` and `value` properties. The `label` is what will be displayed in the dropdown menu. The `value` property defines the date range that will be selected, and can be:
4
+ - An array of two date strings representing a specific range (e.g., `["06/01/2022", "06/07/2022"]`)
5
+ - An object with `time_period` and `amount` properties for dynamic date calculations:
6
+ - The `time_period` property accepts `"days"`, `"weeks"`, `"months"`, `"quarters"`, or `"years"`, representing past time periods calculated from today.
7
+ - The `amount` property accepts any number.
8
+
9
+ **The `override` property** is a boolean that controls whether custom dates replace or append to the default quick pick options. Default is `true` (replaces defaults). Set to `false` to append your custom dates to the default quick pick options.
10
+
@@ -25,6 +25,7 @@ examples:
25
25
  - dropdown_quickpick_rails: Quick Pick Variant
26
26
  - dropdown_quickpick_range_end_rails: Quick Pick Variant (Range Ends Today)
27
27
  - dropdown_quickpick_default_dates: Quick Pick Variant (Default Dates)
28
+ - dropdown_quickpick_custom_rails: Quick Pick Variant (Custom Quick Pick Dates)
28
29
  - dropdown_quickpick_with_date_pickers_rails: Quick Pick with Date Pickers
29
30
  - dropdown_quickpick_with_date_pickers_default_rails: Quick Pick with Date Pickers (Default Value)
30
31
 
@@ -57,6 +58,7 @@ examples:
57
58
  - dropdown_quickpick: Quick Pick Variant
58
59
  - dropdown_quickpick_range_end: Quick Pick Variant (Range Ends Today)
59
60
  - dropdown_quickpick_default_dates: Quick Pick Variant (Default Dates)
61
+ - dropdown_quickpick_custom: Quick Pick Variant (Custom Quick Pick Dates)
60
62
  - dropdown_quickpick_with_date_pickers: Quick Pick Variant with Date Pickers
61
63
 
62
64
 
@@ -26,4 +26,5 @@ export {default as DropdownWithCustomActiveStyleOptions} from './_dropdown_with_
26
26
  export { default as DropdownQuickpick } from './_dropdown_quickpick.jsx'
27
27
  export { default as DropdownQuickpickRangeEnd } from './_dropdown_quickpick_range_end.jsx'
28
28
  export { default as DropdownQuickpickDefaultDates } from './_dropdown_quickpick_default_dates.jsx'
29
- export { default as DropdownQuickpickWithDatePickers } from './_dropdown_quickpick_with_date_pickers.jsx'
29
+ export { default as DropdownQuickpickWithDatePickers } from './_dropdown_quickpick_with_date_pickers.jsx'
30
+ export { default as DropdownQuickpickCustom } from './_dropdown_quickpick_custom.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,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
@@ -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.
@@ -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.8.0.pre.rc.0
4
+ version: 15.8.0.pre.rc.1
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-06 00:00:00.000000000 Z
12
+ date: 2026-01-08 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: playbook_ui
@@ -924,6 +924,10 @@ files:
924
924
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_default.jsx
925
925
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick.jsx
926
926
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick.md
927
+ - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_custom.jsx
928
+ - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_custom.md
929
+ - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_custom_rails.html.erb
930
+ - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_custom_rails.md
927
931
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_default_dates.html.erb
928
932
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_default_dates.jsx
929
933
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_default_dates.md
@@ -2003,8 +2007,12 @@ files:
2003
2007
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_default.md
2004
2008
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_focus.jsx
2005
2009
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_focus.md
2010
+ - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_height.jsx
2011
+ - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_height.md
2006
2012
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_inline.jsx
2007
2013
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_inline.md
2014
+ - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_min_height.jsx
2015
+ - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_min_height.md
2008
2016
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_preview.jsx
2009
2017
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_simple.jsx
2010
2018
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_sticky.jsx