playbook_ui_docs 14.4.0.pre.alpha.PLAY1529removefaeasy3900 → 14.4.0.pre.alpha.PLAY1546highchartsbump3822
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_inline.html.erb +1 -1
- data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb +2 -10
- data/app/pb_kits/playbook/pb_filter/docs/_filter_max_height.html.erb +1 -5
- data/app/pb_kits/playbook/pb_filter/docs/_filter_max_width.html.erb +1 -5
- data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.html.erb +1 -5
- data/app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.html.erb +1 -5
- data/app/pb_kits/playbook/pb_filter/docs/_filter_only.html.erb +1 -5
- data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.html.erb +1 -5
- data/app/pb_kits/playbook/pb_filter/docs/_filter_single.html.erb +1 -5
- data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx +1 -12
- data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change_react.md +1 -3
- data/app/pb_kits/playbook/pb_popover/docs/_popover_list.html.erb +13 -14
- data/app/pb_kits/playbook/pb_popover/docs/_popover_list.jsx +4 -4
- data/app/pb_kits/playbook/pb_radio/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_radio/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_typeahead/docs/index.js +0 -1
- data/dist/playbook-doc.js +1 -1
- metadata +2 -5
- data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.jsx +0 -59
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.html.erb +0 -88
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.jsx +0 -60
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 86e7d8dd13e09a6cb505e11d01b4b1438241a239b0be2ed374f3ea561e9d26b1
|
4
|
+
data.tar.gz: 3f69ac096e4b1b5e97cbf6bae5c2aaf8307c56369fb2376306cac5b998d1d7a5
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 5a5cc1729f91176c67a446d5e9dd2288c639272baf3ba895cb8c57ce608739a2d99e4f75b2d8b71da05dde17a5a25d3b46e255b23caf817036391dd048a2a7f0
|
7
|
+
data.tar.gz: 83e047d4d93c778d64f4eb7ae5a11707ce016ed39fb14cdf3e863ede50ae457548124933af5cd420223f04b2e3f94ff55458323cb511b0b50ce23b9e7998f919
|
@@ -30,11 +30,7 @@
|
|
30
30
|
<%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
|
31
31
|
|
32
32
|
<%= form.actions do |action| %>
|
33
|
-
<%= action.submit props: {
|
34
|
-
text: "Apply",
|
35
|
-
data: {
|
36
|
-
disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
|
37
|
-
},}%>
|
33
|
+
<%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
|
38
34
|
<%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
|
39
35
|
<% end %>
|
40
36
|
<% end %>
|
@@ -68,11 +64,7 @@
|
|
68
64
|
<%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
|
69
65
|
|
70
66
|
<%= form.actions do |action| %>
|
71
|
-
<%= action.submit props: {
|
72
|
-
text: "Apply",
|
73
|
-
data: {
|
74
|
-
disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
|
75
|
-
},}%>
|
67
|
+
<%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
|
76
68
|
<%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
|
77
69
|
<% end %>
|
78
70
|
<% end %>
|
@@ -35,11 +35,7 @@
|
|
35
35
|
<%= form.collection_select :example_collection_select, example_collection, :value, :name, props: {max_width: "sm", label: true } %>
|
36
36
|
|
37
37
|
<%= form.actions do |action| %>
|
38
|
-
<%= action.submit props: {
|
39
|
-
text: "Apply",
|
40
|
-
data: {
|
41
|
-
disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
|
42
|
-
},}%>
|
38
|
+
<%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
|
43
39
|
<%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
|
44
40
|
<% end %>
|
45
41
|
<% end %>
|
@@ -30,11 +30,7 @@
|
|
30
30
|
<%= form.collection_select :example_collection_select, example_collection, :value, :name, props: {max_width: "sm", label: true } %>
|
31
31
|
|
32
32
|
<%= form.actions do |action| %>
|
33
|
-
<%= action.submit props: {
|
34
|
-
text: "Apply",
|
35
|
-
data: {
|
36
|
-
disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
|
37
|
-
},}%>
|
33
|
+
<%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
|
38
34
|
<%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
|
39
35
|
<% end %>
|
40
36
|
<% end %>
|
@@ -69,11 +69,7 @@
|
|
69
69
|
<%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
|
70
70
|
|
71
71
|
<%= form.actions do |action| %>
|
72
|
-
<%= action.submit props: {
|
73
|
-
text: "Apply",
|
74
|
-
data: {
|
75
|
-
disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
|
76
|
-
},}%>
|
72
|
+
<%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
|
77
73
|
<%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
|
78
74
|
<% end %>
|
79
75
|
<% end %>
|
@@ -24,11 +24,7 @@
|
|
24
24
|
<%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
|
25
25
|
|
26
26
|
<%= form.actions do |action| %>
|
27
|
-
<%= action.submit props: {
|
28
|
-
text: "Apply",
|
29
|
-
data: {
|
30
|
-
disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
|
31
|
-
},}%>
|
27
|
+
<%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
|
32
28
|
<%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
|
33
29
|
<% end %>
|
34
30
|
<% end %>
|
@@ -22,11 +22,7 @@
|
|
22
22
|
<%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
|
23
23
|
|
24
24
|
<%= form.actions do |action| %>
|
25
|
-
<%= action.submit props: {
|
26
|
-
text: "Apply",
|
27
|
-
data: {
|
28
|
-
disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
|
29
|
-
},}%>
|
25
|
+
<%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
|
30
26
|
<%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
|
31
27
|
<% end %>
|
32
28
|
<% end %>
|
@@ -23,11 +23,7 @@
|
|
23
23
|
<%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
|
24
24
|
|
25
25
|
<%= form.actions do |action| %>
|
26
|
-
<%= action.submit props: {
|
27
|
-
text: "Apply",
|
28
|
-
data: {
|
29
|
-
disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
|
30
|
-
},}%>
|
26
|
+
<%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
|
31
27
|
<%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
|
32
28
|
<% end %>
|
33
29
|
<% end %>
|
@@ -29,11 +29,7 @@
|
|
29
29
|
<%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
|
30
30
|
|
31
31
|
<%= form.actions do |action| %>
|
32
|
-
<%= action.submit props: {
|
33
|
-
text: "Apply",
|
34
|
-
data: {
|
35
|
-
disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
|
36
|
-
},}%>
|
32
|
+
<%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
|
37
33
|
<%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
|
38
34
|
<% end %>
|
39
35
|
<% end %>
|
@@ -22,16 +22,6 @@ 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
|
-
|
35
25
|
<Table
|
36
26
|
marginBottom="xs"
|
37
27
|
responsive="none"
|
@@ -59,8 +49,7 @@ const PaginationPageChange = (props) => {
|
|
59
49
|
</Table>
|
60
50
|
|
61
51
|
<Pagination
|
62
|
-
current={
|
63
|
-
key={`pagination-bottom-${activePage}`}
|
52
|
+
current={1}
|
64
53
|
onChange={onPageChange}
|
65
54
|
range={5}
|
66
55
|
total={totalPages}
|
@@ -1,3 +1 @@
|
|
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}`.
|
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,10 +1,8 @@
|
|
1
1
|
<%= pb_rails("button", props: { variant: "secondary", id: 'list' }) do %>
|
2
2
|
<%= pb_rails("flex", props: {align: "center"}) do %>
|
3
|
-
Filter By
|
3
|
+
Filter By
|
4
4
|
<%= pb_rails("flex/flex_item", props: {margin_left: "xxs"}) do %>
|
5
|
-
|
6
|
-
<%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true }) %>
|
7
|
-
</div>
|
5
|
+
<div id="arrow-icon" style="display: flex"></div>
|
8
6
|
<% end %>
|
9
7
|
<% end %>
|
10
8
|
<% end %>
|
@@ -20,17 +18,18 @@
|
|
20
18
|
|
21
19
|
|
22
20
|
<script type="text/javascript">
|
23
|
-
|
24
|
-
|
21
|
+
const button = document.querySelector("#list")
|
22
|
+
let buttonClicked = false
|
25
23
|
|
26
|
-
|
24
|
+
const arrowDiv = document.querySelector("#arrow-icon")
|
25
|
+
arrowDiv.innerHTML = '<i class="far fa-angle-down"></i>'
|
27
26
|
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
}
|
27
|
+
button.onclick = () => {
|
28
|
+
buttonClicked = !buttonClicked
|
29
|
+
if (buttonClicked) {
|
30
|
+
arrowDiv.innerHTML = '<i class="far fa-angle-up"></i>'
|
31
|
+
} else {
|
32
|
+
arrowDiv.innerHTML = '<i class="far fa-angle-down"></i>'
|
35
33
|
}
|
34
|
+
}
|
36
35
|
</script>
|
@@ -26,10 +26,10 @@ const PopoverWithButton = (props) => {
|
|
26
26
|
className={showPopover ? "fa-flip-vertical" : ""}
|
27
27
|
display="inline_flex"
|
28
28
|
>
|
29
|
-
<Icon
|
30
|
-
fixedWidth
|
31
|
-
icon="angle-down"
|
32
|
-
margin-left="xxs"
|
29
|
+
<Icon
|
30
|
+
fixedWidth
|
31
|
+
icon="angle-down"
|
32
|
+
margin-left="xxs"
|
33
33
|
/>
|
34
34
|
</Flex>
|
35
35
|
</Flex>
|
@@ -3,4 +3,3 @@ 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'
|
@@ -9,7 +9,6 @@ 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
|
13
12
|
- typeahead_with_pills_color: With Pills (Custom Color)
|
14
13
|
|
15
14
|
react:
|
@@ -25,5 +24,4 @@ examples:
|
|
25
24
|
- typeahead_async_createable: Createable (+ Async Data)
|
26
25
|
- typeahead_error_state: Error State
|
27
26
|
- typeahead_custom_menu_list: Custom MenuList
|
28
|
-
- typeahead_margin_bottom: Margin Bottom
|
29
27
|
- typeahead_with_pills_color: With Pills (Custom Color)
|
@@ -10,5 +10,4 @@ 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'
|
14
13
|
export { default as TypeaheadWithPillsColor } from './_typeahead_with_pills_color.jsx'
|