playbook_ui_docs 15.4.0.pre.rc.0 → 15.4.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: cd551831023d6461df0dceafbcbd6a58bdc862f4f98252ec7f58a40bcd709781
4
- data.tar.gz: 235b73c843621ff5890230cbdea09bfea94314bcf33fb5febae8f6d380f8a363
3
+ metadata.gz: 7ac55085fcb750ce81b4b65727f8d5109e4a0a66e314be044e1b22ccf557c916
4
+ data.tar.gz: 817b5503d03bf7690938f2a8a382bb66e90bc39f79c027ef53360baa2f94d2f3
5
5
  SHA512:
6
- metadata.gz: d8b5586a5c0637c76f0e17880a57e71ba6bb3db2abedf58ed49c57775d5bdaa1eec985bff876552f2cc0424c3727cef41a0b94be630d519c25ca5365f2099da4
7
- data.tar.gz: 23aa7a066d364419e2eeed5ac4723d259e2d7b71d1fd31f8a677f2d3546844a6a89f58728c168c817fd005710b16a7e31958739cab3b77031ef504acd6a850b8
6
+ metadata.gz: 74df73e915b69736c26ddcb09781e62b636fea5bd5a386b17fd84a457a0e0cc1cc8e5ec98198ae82c61b34792f7b1358f2dd00e60b95c9ddeb1e4cbc8c163d18
7
+ data.tar.gz: cf4d0bc977064a325ef399fa5ffe5b258a329e3b756c75f17e52b1d7b6fa4aedac074d3b604dba4c9295ac38a787df2df49011d211cb970f799636dce666d9d1
@@ -38,7 +38,10 @@ const AdvancedTablePaginationWithProps = (props) => {
38
38
  const paginationProps = {
39
39
  pageIndex: 1,
40
40
  pageSize: 10,
41
- range: 2
41
+ range: 2,
42
+ onPageChange: (pageIndex) => {
43
+ console.log('Current page index:', pageIndex);
44
+ }
42
45
  }
43
46
 
44
47
  return (
@@ -1,5 +1,6 @@
1
- `paginationProps` is an optional prop that can be used to further customize pagination for the AdvancedTable. This prop is an object with 2 optional items:
1
+ `paginationProps` is an optional prop that can be used to further customize pagination for the AdvancedTable. This prop is an object with the following optional items:
2
2
 
3
3
  - `pageIndex`: An optional prop to set which page is set to open on initial load. Default is '0'
4
4
  - `pageSize`: An optional prop to set total number of rows for each page before the Table paginates. Default is '20'
5
- - `range`: The range prop determines how many pages to display in the Pagination component. Regardless of this value, the first two and last two pages are always visible to facilitate navigation to the beginning and end of the pagination. If these always-visible pages fall within the specified range, they are included in the display. If they fall outside the range, the pagination will show additional pages up to the number defined by the range prop. See [here for more details](https://playbook.powerapp.cloud/kits/pagination/react#default). Default is set to '5'
5
+ - `range`: The range prop determines how many pages to display in the Pagination component. Regardless of this value, the first two and last two pages are always visible to facilitate navigation to the beginning and end of the pagination. If these always-visible pages fall within the specified range, they are included in the display. If they fall outside the range, the pagination will show additional pages up to the number defined by the range prop. See [here for more details](https://playbook.powerapp.cloud/kits/pagination/react#default). Default is set to '5'
6
+ - `onPageChange`: A callback function that gives to access to the current page index.
@@ -0,0 +1,68 @@
1
+ import React, { useState } from "react";
2
+ import { PbReactPopover, CircleIconButton, Body, Flex } from "playbook-ui";
3
+
4
+ const PopoverAppendTo = (props) => {
5
+ const [showParentPopover, setShowParentPopover] = useState(false);
6
+ const [showSelectorPopover, setShowSelectorPopover] = useState(false);
7
+
8
+ const parentPopoverReference = (
9
+ <CircleIconButton
10
+ icon="info"
11
+ onClick={() => setShowParentPopover(!showParentPopover)}
12
+ variant="secondary"
13
+ />
14
+ );
15
+
16
+ const selectorPopoverReference = (
17
+ <CircleIconButton
18
+ icon="info"
19
+ onClick={() => setShowSelectorPopover(!showSelectorPopover)}
20
+ variant="secondary"
21
+ />
22
+ );
23
+
24
+ return (
25
+ <>
26
+ <Flex
27
+ marginBottom="md"
28
+ orientation="row"
29
+ vertical="center"
30
+ {...props}
31
+ >
32
+ <Body text="Click info for more details" />
33
+ &nbsp;
34
+ <PbReactPopover
35
+ appendTo="parent"
36
+ offset
37
+ placement="top"
38
+ reference={parentPopoverReference}
39
+ show={showParentPopover}
40
+ {...props}
41
+ >
42
+ {'I\'m a popover. I have been appended to my parent element.'}
43
+ </PbReactPopover>
44
+ </Flex>
45
+
46
+ <Flex
47
+ orientation="row"
48
+ vertical="center"
49
+ {...props}
50
+ >
51
+ <Body text="Click info for more details" />
52
+ &nbsp;
53
+ <PbReactPopover
54
+ appendTo=".kit-show-wrapper"
55
+ offset
56
+ placement="top"
57
+ reference={selectorPopoverReference}
58
+ show={showSelectorPopover}
59
+ {...props}
60
+ >
61
+ {'I\'m a popover. I have been appended to the .kit-show-wrapper.'}
62
+ </PbReactPopover>
63
+ </Flex>
64
+ </>
65
+ );
66
+ };
67
+
68
+ export default PopoverAppendTo;
@@ -0,0 +1 @@
1
+ By default, the popover tooltip attaches to the `<body>`. To attach it elsewhere, use the `appendTo` prop. Set it to `"parent"` to place the tooltip inside its parent element, or pass any CSS selector (`#id` or `.class`) to specify a custom container.
@@ -15,3 +15,4 @@ examples:
15
15
  - popover_z_index: Set Z-Index
16
16
  - popover_scroll_height: Scroll and Height Settings
17
17
  - popover_actionable_content: With Actionable Content
18
+ - popover_append_to: Append To
@@ -4,3 +4,4 @@ export { default as PopoverClose } from './_popover_close.jsx'
4
4
  export { default as PopoverZIndex } from './_popover_z_index.jsx'
5
5
  export { default as PopoverScrollHeight } from './_popover_scroll_height.jsx'
6
6
  export { default as PopoverActionableContent } from './_popover_actionable_content.jsx'
7
+ export { default as PopoverAppendTo } from './_popover_append_to.jsx'
@@ -0,0 +1,64 @@
1
+ <%
2
+ grouped_options = [
3
+ {
4
+ label: "Warm Colors",
5
+ options: [
6
+ { label: "Red", value: "#FF0000" },
7
+ { label: "Orange", value: "#FFA500" },
8
+ { label: "Yellow", value: "#FFFF00" },
9
+ { label: "Coral", value: "#FF7F50" },
10
+ { label: "Gold", value: "#FFD700" }
11
+ ]
12
+ },
13
+ {
14
+ label: "Cool Colors",
15
+ options: [
16
+ { label: "Blue", value: "#0000FF" },
17
+ { label: "Teal", value: "#008080" },
18
+ { label: "Cyan", value: "#00FFFF" },
19
+ { label: "Navy", value: "#000080" },
20
+ { label: "Turquoise", value: "#40E0D0" }
21
+ ]
22
+ },
23
+ {
24
+ label: "Neutrals",
25
+ options: [
26
+ { label: "White", value: "#FFFFFF" },
27
+ { label: "Black", value: "#000000" },
28
+ { label: "Gray", value: "#808080" },
29
+ { label: "Beige", value: "#F5F5DC" },
30
+ { label: "Silver", value: "#C0C0C0" }
31
+ ]
32
+ },
33
+ {
34
+ label: "Earth Tones",
35
+ options: [
36
+ { label: "Brown", value: "#A52A2A" },
37
+ { label: "Olive", value: "#808000" },
38
+ { label: "Forest Green", value: "#228B22" },
39
+ { label: "Tan", value: "#D2B48C" },
40
+ { label: "Maroon", value: "#800000" }
41
+ ]
42
+ },
43
+ {
44
+ label: "Fun Shades",
45
+ options: [
46
+ { label: "Pink", value: "#FFC0CB" },
47
+ { label: "Magenta", value: "#FF00FF" },
48
+ { label: "Lime", value: "#00FF00" },
49
+ { label: "Purple", value: "#800080" },
50
+ { label: "Indigo", value: "#4B0082" }
51
+ ]
52
+ }
53
+ ]
54
+ %>
55
+ <br />
56
+ <%= pb_rails("typeahead", props: {
57
+ id: "typeahead-custom-options",
58
+ options: grouped_options,
59
+ label: "Colors",
60
+ name: :foo,
61
+ placeholder: "Select a Color...",
62
+ is_multi: false
63
+ })
64
+ %>
@@ -0,0 +1,70 @@
1
+ import React from 'react'
2
+
3
+ import Typeahead from '../_typeahead'
4
+
5
+ const groupedOptions = [
6
+ {
7
+ label: "Warm Colors",
8
+ options: [
9
+ { label: "Red", value: "#FF0000" },
10
+ { label: "Orange", value: "#FFA500" },
11
+ { label: "Yellow", value: "#FFFF00" },
12
+ { label: "Coral", value: "#FF7F50" },
13
+ { label: "Gold", value: "#FFD700" }
14
+ ]
15
+ },
16
+ {
17
+ label: "Cool Colors",
18
+ options: [
19
+ { label: "Blue", value: "#0000FF" },
20
+ { label: "Teal", value: "#008080" },
21
+ { label: "Cyan", value: "#00FFFF" },
22
+ { label: "Navy", value: "#000080" },
23
+ { label: "Turquoise", value: "#40E0D0" }
24
+ ]
25
+ },
26
+ {
27
+ label: "Neutrals",
28
+ options: [
29
+ { label: "White", value: "#FFFFFF" },
30
+ { label: "Black", value: "#000000" },
31
+ { label: "Gray", value: "#808080" },
32
+ { label: "Beige", value: "#F5F5DC" },
33
+ { label: "Silver", value: "#C0C0C0" }
34
+ ]
35
+ },
36
+ {
37
+ label: "Earth Tones",
38
+ options: [
39
+ { label: "Brown", value: "#A52A2A" },
40
+ { label: "Olive", value: "#808000" },
41
+ { label: "Forest Green", value: "#228B22" },
42
+ { label: "Tan", value: "#D2B48C" },
43
+ { label: "Maroon", value: "#800000" }
44
+ ]
45
+ },
46
+ {
47
+ label: "Fun Shades",
48
+ options: [
49
+ { label: "Pink", value: "#FFC0CB" },
50
+ { label: "Magenta", value: "#FF00FF" },
51
+ { label: "Lime", value: "#00FF00" },
52
+ { label: "Purple", value: "#800080" },
53
+ { label: "Indigo", value: "#4B0082" }
54
+ ]
55
+ }
56
+ ]
57
+
58
+ const TypeaheadCustomOptions = (props) => {
59
+ return (
60
+ <Typeahead
61
+ label="Colors"
62
+ options={groupedOptions}
63
+ placeholder="Select a Color..."
64
+ {...props}
65
+ />
66
+ )
67
+ }
68
+
69
+ export default TypeaheadCustomOptions
70
+
@@ -0,0 +1 @@
1
+ Grouped options can be rendered via structuring the options in the way shown in the code snippet below.
@@ -25,11 +25,77 @@
25
25
  ]
26
26
  %>
27
27
 
28
+ <%
29
+ grouped_options = [
30
+ {
31
+ label: "Warm Colors",
32
+ options: [
33
+ { label: "Red", value: "#FF0000" },
34
+ { label: "Orange", value: "#FFA500" },
35
+ { label: "Yellow", value: "#FFFF00" },
36
+ { label: "Coral", value: "#FF7F50" },
37
+ { label: "Gold", value: "#FFD700" }
38
+ ]
39
+ },
40
+ {
41
+ label: "Cool Colors",
42
+ options: [
43
+ { label: "Blue", value: "#0000FF" },
44
+ { label: "Teal", value: "#008080" },
45
+ { label: "Cyan", value: "#00FFFF" },
46
+ { label: "Navy", value: "#000080" },
47
+ { label: "Turquoise", value: "#40E0D0" }
48
+ ]
49
+ },
50
+ {
51
+ label: "Neutrals",
52
+ options: [
53
+ { label: "White", value: "#FFFFFF" },
54
+ { label: "Black", value: "#000000" },
55
+ { label: "Gray", value: "#808080" },
56
+ { label: "Beige", value: "#F5F5DC" },
57
+ { label: "Silver", value: "#C0C0C0" }
58
+ ]
59
+ },
60
+ {
61
+ label: "Earth Tones",
62
+ options: [
63
+ { label: "Brown", value: "#A52A2A" },
64
+ { label: "Olive", value: "#808000" },
65
+ { label: "Forest Green", value: "#228B22" },
66
+ { label: "Tan", value: "#D2B48C" },
67
+ { label: "Maroon", value: "#800000" }
68
+ ]
69
+ },
70
+ {
71
+ label: "Fun Shades",
72
+ options: [
73
+ { label: "Pink", value: "#FFC0CB" },
74
+ { label: "Magenta", value: "#FF00FF" },
75
+ { label: "Lime", value: "#00FF00" },
76
+ { label: "Purple", value: "#800080" },
77
+ { label: "Indigo", value: "#4B0082" }
78
+ ]
79
+ }
80
+ ]
81
+ %>
82
+
83
+
28
84
  <%= pb_rails("typeahead", props: {
29
85
  default_options: [{ label: 'Gray', value: '#808080' }],
30
86
  id: "typeahead-default-value",
31
87
  options: options,
32
- label: "Colors",
88
+ label: "Default Value with basic options",
89
+ name: :foo,
90
+ is_multi: false
91
+ })
92
+ %>
93
+
94
+ <%= pb_rails("typeahead", props: {
95
+ default_options:[{ label: "Pink", value: "#FFC0CB" }],
96
+ id: "typeahead-default-value-grouped-options",
97
+ options: grouped_options,
98
+ label: "Default Value with grouped options",
33
99
  name: :foo,
34
100
  is_multi: false
35
101
  })
@@ -27,14 +27,76 @@ const options = [
27
27
  { label: 'Coral', value: '#FF7F50' }
28
28
  ]
29
29
 
30
+ const groupedOptions = [
31
+ {
32
+ label: "Warm Colors",
33
+ options: [
34
+ { label: "Red", value: "#FF0000" },
35
+ { label: "Orange", value: "#FFA500" },
36
+ { label: "Yellow", value: "#FFFF00" },
37
+ { label: "Coral", value: "#FF7F50" },
38
+ { label: "Gold", value: "#FFD700" }
39
+ ]
40
+ },
41
+ {
42
+ label: "Cool Colors",
43
+ options: [
44
+ { label: "Blue", value: "#0000FF" },
45
+ { label: "Teal", value: "#008080" },
46
+ { label: "Cyan", value: "#00FFFF" },
47
+ { label: "Navy", value: "#000080" },
48
+ { label: "Turquoise", value: "#40E0D0" }
49
+ ]
50
+ },
51
+ {
52
+ label: "Neutrals",
53
+ options: [
54
+ { label: "White", value: "#FFFFFF" },
55
+ { label: "Black", value: "#000000" },
56
+ { label: "Gray", value: "#808080" },
57
+ { label: "Beige", value: "#F5F5DC" },
58
+ { label: "Silver", value: "#C0C0C0" }
59
+ ]
60
+ },
61
+ {
62
+ label: "Earth Tones",
63
+ options: [
64
+ { label: "Brown", value: "#A52A2A" },
65
+ { label: "Olive", value: "#808000" },
66
+ { label: "Forest Green", value: "#228B22" },
67
+ { label: "Tan", value: "#D2B48C" },
68
+ { label: "Maroon", value: "#800000" }
69
+ ]
70
+ },
71
+ {
72
+ label: "Fun Shades",
73
+ options: [
74
+ { label: "Pink", value: "#FFC0CB" },
75
+ { label: "Magenta", value: "#FF00FF" },
76
+ { label: "Lime", value: "#00FF00" },
77
+ { label: "Purple", value: "#800080" },
78
+ { label: "Indigo", value: "#4B0082" }
79
+ ]
80
+ }
81
+ ]
82
+
30
83
  const TypeaheadDefaultValue = (props) => {
31
84
  return (
32
- <Typeahead
33
- defaultValue={options[10]}
34
- label="Colors"
35
- options={options}
36
- {...props}
37
- />
85
+ <>
86
+ <Typeahead
87
+ defaultValue={options[10]}
88
+ label="Default Value with basic options"
89
+ options={options}
90
+ {...props}
91
+ />
92
+ <br />
93
+ <Typeahead
94
+ defaultValue={{ label: "Pink", value: "#FFC0CB" }}
95
+ label="Default Value with grouped options"
96
+ options={groupedOptions}
97
+ {...props}
98
+ />
99
+ </>
38
100
  )
39
101
  }
40
102
 
@@ -1,6 +1,7 @@
1
1
  examples:
2
2
  rails:
3
3
  - typeahead_default: Default
4
+ - typeahead_custom_options: With Grouped Options
4
5
  - typeahead_default_options: With Default Options
5
6
  - typeahead_with_context: With Context
6
7
  - typeahead_with_pills: With Pills
@@ -20,6 +21,7 @@ examples:
20
21
 
21
22
  react:
22
23
  - typeahead_default: Default
24
+ - typeahead_custom_options: With Grouped Options
23
25
  - typeahead_default_value: With Default Value
24
26
  - typeahead_react_hook: React Hook
25
27
  - typeahead_with_highlight: With Highlight
@@ -16,4 +16,5 @@ export { default as TypeaheadTruncatedText } from './_typeahead_truncated_text.j
16
16
  export { default as TypeaheadReactHook } from './_typeahead_react_hook.jsx'
17
17
  export { default as TypeaheadDisabled } from './_typeahead_disabled.jsx'
18
18
  export { default as TypeaheadPreserveInput } from './_typeahead_preserve_input.jsx'
19
- export { default as TypeaheadDefaultValue } from './_typeahead_default_value.jsx'
19
+ export { default as TypeaheadDefaultValue } from './_typeahead_default_value.jsx'
20
+ export { default as TypeaheadCustomOptions } from './_typeahead_custom_options.jsx'