playbook_ui_docs 14.4.0.pre.alpha.PBNTR490multilevelselect3832 → 14.4.0.pre.alpha.PBNTR534filtermaxwidth3903

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: e46b61d01d877a887a285cc94766ad36aef24f54dac3f09556ba59f7f48b2b99
4
- data.tar.gz: 8b088075d1bbcdd5f28958a279953872d18959fd63133580b0657a45fb88e1a9
3
+ metadata.gz: 800dd9f99591ccca224f3e9214d36e3ce1b479c72024594177df2b65930d8c87
4
+ data.tar.gz: a3ffb812509be33e031498ec092c16b4c196cc4dea9d1c51dcd2dcfbfc9c063b
5
5
  SHA512:
6
- metadata.gz: 70bae587f722a7f4c994ccae274ed7c5371cd95db2e1e3f6fc7aface8419df2c29a225ee6f7472c1f5b4eac940fea517351f4bf378c22335ff31d30422a1b712
7
- data.tar.gz: f5a991583248c92751b30fd7da26ca9ec61b4255d89c171f26a4a45c4731d0b81cc3e1a6db38802a42646c81e7d70fa4ca0e8d33266805980a667e0bc56fc198
6
+ metadata.gz: d3a32486cfe49d9a50cd3657b12b4317fbd9ea696af177d31f4e78dac7c773e11a076be2a1b08135455401f134b0cead5b2fb0e5ef60ac8aa33fa0d73f804cee
7
+ data.tar.gz: dae8071306e033df495d195a52a8a6c059e92ebc5e55bad1a98b810bdb4c412ad1afc89e174a39d0b5315b2d78cf23ff680ce02d2c0d8c6589b20bb74d66b1d5
@@ -14,4 +14,4 @@
14
14
  }
15
15
  fpInline.config.onChange.push(showAngleDownHandler)
16
16
  })
17
- <% end %>
17
+ <% end %>
@@ -22,6 +22,16 @@ const PaginationPageChange = (props) => {
22
22
 
23
23
  return (
24
24
  <div className="App">
25
+ <Pagination
26
+ current={activePage}
27
+ key={`pagination-top-${activePage}`}
28
+ marginBottom="xs"
29
+ onChange={onPageChange}
30
+ range={5}
31
+ total={totalPages}
32
+ {...props}
33
+ />
34
+
25
35
  <Table
26
36
  marginBottom="xs"
27
37
  responsive="none"
@@ -49,7 +59,8 @@ const PaginationPageChange = (props) => {
49
59
  </Table>
50
60
 
51
61
  <Pagination
52
- current={1}
62
+ current={activePage}
63
+ key={`pagination-bottom-${activePage}`}
53
64
  onChange={onPageChange}
54
65
  range={5}
55
66
  total={totalPages}
@@ -1 +1,3 @@
1
- You can use the `onChange` prop to control the data of your table. This prop is callback function that will allow you control the state.
1
+ You can use the `onChange` prop to control the data of your table. This prop is callback function that will allow you control the state.
2
+
3
+ To ensure synchronization between multiple pagination components on a single page, use unique, dynamic keys for each pagination instance. Each Pagination component should have its own dynamic key that reflects the current active page: this example uses `pagination-top-${activePage}` and `pagination-bottom-${activePage}`.
@@ -0,0 +1,59 @@
1
+ import React from 'react'
2
+ import Radio from '../_radio'
3
+ import Select from '../../pb_select/_select'
4
+ import Typeahead from '../../pb_typeahead/_typeahead'
5
+ import Title from '../../pb_title/_title'
6
+
7
+ const RadioChildren = (props) => {
8
+
9
+
10
+ const options = [
11
+ { label: 'Orange', value: 'Orange' },
12
+ { label: 'Red', value: 'Red' },
13
+ { label: 'Green', value: 'Green' },
14
+ { label: 'Blue', value: 'Blue' },
15
+ ]
16
+
17
+ return (
18
+ <div>
19
+ <Radio
20
+ customChildren
21
+ label="Select"
22
+ name="Group1"
23
+ tabIndex={0}
24
+ value="Select"
25
+ {...props}
26
+ >
27
+ <Select
28
+ minWidth="xs"
29
+ options={options}
30
+ />
31
+ </Radio>
32
+ <Radio
33
+ customChildren
34
+ label="Typeahead"
35
+ name="Group1"
36
+ tabIndex={0}
37
+ value="Typeahead"
38
+ {...props}
39
+ >
40
+ <Typeahead
41
+ minWidth="xs"
42
+ options={options}
43
+ />
44
+ </Radio>
45
+ <br />
46
+ <Radio
47
+ customChildren
48
+ defaultChecked={false}
49
+ label="Typography"
50
+ name="Group1"
51
+ value="Typography"
52
+ {...props}
53
+ >
54
+ <Title text="Custom Typography" />
55
+ </Radio>
56
+ </div>
57
+ )
58
+ }
59
+ export default RadioChildren
@@ -15,6 +15,7 @@ examples:
15
15
  - radio_error: With Error
16
16
  - radio_alignment: Alignment
17
17
  - radio_disabled: Disabled
18
+ - radio_custom_children: Custom Children
18
19
 
19
20
  swift:
20
21
  - radio_default_swift: Default
@@ -3,3 +3,4 @@ export { default as RadioCustom } from './_radio_custom.jsx'
3
3
  export { default as RadioError } from './_radio_error.jsx'
4
4
  export { default as RadioAlignment } from './_radio_alignment.jsx'
5
5
  export { default as RadioDisabled } from './_radio_disabled.jsx'
6
+ export { default as RadioCustomChildren } from './_radio_custom_children.jsx'
@@ -0,0 +1,88 @@
1
+ <%
2
+ options = [
3
+ { label: 'Orange', value: '#FFA500' },
4
+ { label: 'Red', value: '#FF0000' },
5
+ { label: 'Green', value: '#00FF00' },
6
+ { label: 'Blue', value: '#0000FF' },
7
+ ]
8
+ %>
9
+
10
+ <%= pb_rails("typeahead", props: {
11
+ id: "typeahead-default",
12
+ placeholder: "All Colors",
13
+ options: options,
14
+ label: "None",
15
+ name: :foo,
16
+ is_multi: false,
17
+ margin_bottom: "none",
18
+ })
19
+ %>
20
+ <%= pb_rails("typeahead", props: {
21
+ id: "typeahead-default",
22
+ placeholder: "All Colors",
23
+ options: options,
24
+ label: "XXS",
25
+ name: :foo,
26
+ is_multi: false,
27
+ margin_bottom: "xxs",
28
+ })
29
+ %>
30
+ <%= pb_rails("typeahead", props: {
31
+ id: "typeahead-default",
32
+ placeholder: "All Colors",
33
+ options: options,
34
+ label: "XS",
35
+ name: :foo,
36
+ is_multi: false,
37
+ margin_bottom: "xs",
38
+ })
39
+ %>
40
+ <%= pb_rails("typeahead", props: {
41
+ id: "typeahead-default",
42
+ placeholder: "All Colors",
43
+ options: options,
44
+ label: "Default - SM",
45
+ name: :foo,
46
+ is_multi: false,
47
+ })
48
+ %>
49
+ <%= pb_rails("typeahead", props: {
50
+ id: "typeahead-default",
51
+ placeholder: "All Colors",
52
+ options: options,
53
+ label: "MD",
54
+ name: :foo,
55
+ is_multi: false,
56
+ margin_bottom: "md",
57
+ })
58
+ %>
59
+ <%= pb_rails("typeahead", props: {
60
+ id: "typeahead-default",
61
+ placeholder: "All Colors",
62
+ options: options,
63
+ label: "LG",
64
+ name: :foo,
65
+ is_multi: false,
66
+ margin_bottom: "lg",
67
+ })
68
+ %>
69
+ <%= pb_rails("typeahead", props: {
70
+ id: "typeahead-default",
71
+ placeholder: "All Colors",
72
+ options: options,
73
+ label: "XL",
74
+ name: :foo,
75
+ is_multi: false,
76
+ margin_bottom: "xl",
77
+ })
78
+ %>
79
+
80
+ <%= javascript_tag defer: "defer" do %>
81
+ document.addEventListener("pb-typeahead-kit-typeahead-default-result-option-select", function(event) {
82
+ console.log('Single Option selected')
83
+ console.dir(event.detail)
84
+ })
85
+ document.addEventListener("pb-typeahead-kit-typeahead-default-result-clear", function() {
86
+ console.log('All options cleared')
87
+ })
88
+ <% end %>
@@ -0,0 +1,60 @@
1
+ import React from 'react'
2
+
3
+ import Typeahead from '../_typeahead'
4
+
5
+ const options = [
6
+ { label: 'Orange', value: '#FFA500' },
7
+ { label: 'Red', value: '#FF0000' },
8
+ { label: 'Green', value: '#00FF00' },
9
+ { label: 'Blue', value: '#0000FF' },
10
+ ]
11
+
12
+ const TypeaheadMarginBottom = (props) => {
13
+ return (
14
+ <>
15
+ <Typeahead
16
+ label="None"
17
+ marginBottom="none"
18
+ options={options}
19
+ {...props}
20
+ />
21
+ <Typeahead
22
+ label="XXS"
23
+ marginBottom="xxs"
24
+ options={options}
25
+ {...props}
26
+ />
27
+ <Typeahead
28
+ label="XS"
29
+ marginBottom="xs"
30
+ options={options}
31
+ {...props}
32
+ />
33
+ <Typeahead
34
+ label="Default - SM"
35
+ options={options}
36
+ {...props}
37
+ />
38
+ <Typeahead
39
+ label="MD"
40
+ marginBottom="md"
41
+ options={options}
42
+ {...props}
43
+ />
44
+ <Typeahead
45
+ label="LG"
46
+ marginBottom="lg"
47
+ options={options}
48
+ {...props}
49
+ />
50
+ <Typeahead
51
+ label="XL"
52
+ marginBottom="xl"
53
+ options={options}
54
+ {...props}
55
+ />
56
+ </>
57
+ )
58
+ }
59
+
60
+ export default TypeaheadMarginBottom
@@ -9,6 +9,7 @@ examples:
9
9
  - typeahead_inline: Inline
10
10
  - typeahead_multi_kit: Multi Kit Options
11
11
  - typeahead_error_state: Error State
12
+ - typeahead_margin_bottom: Margin Bottom
12
13
  - typeahead_with_pills_color: With Pills (Custom Color)
13
14
 
14
15
  react:
@@ -24,4 +25,5 @@ examples:
24
25
  - typeahead_async_createable: Createable (+ Async Data)
25
26
  - typeahead_error_state: Error State
26
27
  - typeahead_custom_menu_list: Custom MenuList
28
+ - typeahead_margin_bottom: Margin Bottom
27
29
  - typeahead_with_pills_color: With Pills (Custom Color)
@@ -10,4 +10,5 @@ export { default as TypeaheadCreateable } from './_typeahead_createable.jsx'
10
10
  export { default as TypeaheadAsyncCreateable } from './_typeahead_async_createable.jsx'
11
11
  export { default as TypeaheadErrorState } from './_typeahead_error_state.jsx'
12
12
  export { default as TypeaheadCustomMenuList } from './_typeahead_custom_menu_list.jsx'
13
+ export { default as TypeaheadMarginBottom } from './_typeahead_margin_bottom.jsx'
13
14
  export { default as TypeaheadWithPillsColor } from './_typeahead_with_pills_color.jsx'